[React]モーダル作り方(feat.条件文)

モーダル

今回はボタンをクリックするとモーダルがでる機能を作ります。

デザイン

モーダルは前回作ったものを使います。
modal

function App() {
  return (
    <div className="App">
      <button> click! </button>
    </div>
  );
}

function Modal(){
  return (
    <div className="modal">
      <h4>名前</h4>
      <p>年齢</p>
      <p>性別</p>
    </div>
  )
}

state

まずモーダルの状態をstateにセーブします。

let [modal, setModal] = useState(false);

条件文

jsx中にはif文を使えません。
今回は三項演算子を使います。

stateがtureとモーダルが出て、falseなら出ません。
こんな感じですね。

function App (){
  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      ...
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

ボタンをクリックするとモーダルが出る

まずボタンにonClickをいれます。

<button onClick={}> click! </button>

 

ボタンをクリックするとモーダルが出るためには、
onClickの中にstateをtureに変更する関数を入れます。

<button onClick={()=>{ setModal(true) }}> click! </button>

 

しかしこれではまたクリックすると消えません。

<button onClick={()=>{ setModal(!modal) }}> click! </button>

これで完成です。