子コンポーネントから親の状態を変更する

状態管理ライブラリを入れる必要もないくらい小さい開発用のメモです。

• 親コンポーネント

import { useState } from 'react'
import Child from './Child'

const Parent = () => {
  const [state, setState] = useState(false)
  return (
    <>
      <p>現在のstateは「 {state ? 'true' : 'false'} 」です。</p>
      <Child set={setState} />
    </>
  )
}

export default Parent

• 子コンポーネント

const Child = (props) => (
  <>
    <button onClick={()=>props.set(true)}>子のtrueボタン</button> 
    <button onClick={()=>props.set(false)}>子のfalseボタン</button>
  </>
)

export default Child

propsにsetStateを用意しておいて、子コンポーネントから呼び出して実行します。