ReactJS を使用して要素を非表示にする方法

Question

画面にテキストを表示し、ボタンが押されたときのみ非表示にしたいのですが、方法がわかりません。 useState を使用してこの効果を実現したいと考えています:

リーリー

私が見つけた問題は、ボタンをクリックするとページが再レンダリングされ、可視性の値がデフォルト値 (true) に変更されることです。どうすればいいですか？

Answer 1

Idk what are you experiencing but for me it works fine the following code:

import React from 'react';
import {useState} from 'react';

export function App(props) {
  const [textVisibility, setTextVisibility] = useState(true)


  return (
    <div className='App'>
      {textVisibility && <h1 onClick={() => setTextVisibility(!textVisibility)}>Hello React.</h1>}
      
      <button onClick={() => setTextVisibility(false)}>Invisible</button>
      <button onClick={() => setTextVisibility(true)}>Visible</button>
    </div>
  );
}

Answer 2

リーリー