【React】useStateでstateで画面の表示切替する

useStateとは

useStateとは状態を管理するものです。
そのステートに任意の値を渡すことで、画面上に別の描画に切り替えることができます。

その方法について書いていきます。

実装

useState

//宣言
const [value,setValue] = useState("INITIAL")

上記例では、右側の「INITIAL」を左のvalueに代入しています。
左側にあるsetValueはvalueに値を設定する際に使用されるメソッドになります。
実際に使うと下記のようになります

setState

setState(2)

このようにステートを更新していきます。
このステートに合わせて画面遷移させていきます。

react

import React,[Fragment,useState] from "react";

export const Sample {
    const [value,setValue] = useState("INITIALIZE");

    useEffect(() => {
      setValue("LOADING")
    })
    
    setValueHandler(){
        setValue("SUCEESS")
    }
    return (
      {
       value === "INITIALIZE"?
       <Fragment>
         状態は#{value}です
         <button onClick={setValueHandler("LOAING")}>LOADING</button>
      </Fragment>
　　　:
      value === "LOADING"?
      <Fragment>
         状態は#{value}です           
         <button onClick={setValueHandler("SUCCESS")}>SUCCESS</button>
      </Fragment>
      :
      <Fragment>
         状態は#{value}です           
         <button onClick={setValueHandler("INITIALIZE")}>INITIALIZE</button>
      </Fragment>
      }
      
)}

ソースのreturn以上の個所ではハンドラが書かれています。

ハンドラとは何らかのイベントに対してどのような動作するかをまとめたものです。

react

//useEffectで最初に読み込まれた時のあたいを設定しています
useEffect(() => {
      setValue("LOADING")
    })

//setvalueHandlerではイベントごとに値を設定しなおしています
    setValueHandler(){
        setValue("SUCEESS")
    }

return以下は値に合わせて条件式画面に表示させる値を変更しています

INITIAL状態の画面→LOADING状態の画面SUCCESS状態の画面が表示されるようになります。
画面の表示切替はボタンについているonClickイベントに紐づいたsetValueHandlerによって値が変更され、それに対応して画面が再描画されるといったものです。

ざっくりですがこんな感じです。