【React(TypeScript)】子コンポーネントから親コンポーネントのStateを更新する

概要

子コンポーネントから親コンポーネントのStateを更新する場合、親コンポーネント側にStateを更新するFunctionを作って、これを子コンポーネントに渡す方法が一般的かと思います。が、この方法よりも簡単にできる方法がありましたので、マイベストプラクティスとして共有させていただきたいと思います。

やり方

子コンポーネントに親コンポーネントで定義したStateのSetterメソッドを渡すようにします。子コンポーネント側ではこのSetterメソッドを使ってStateを更新するようにします。

子コンポーネント

propsでStateのSetterメソッドを受け取れるようにして、これを使ってStateを更新します。

import { type Dispatch, useState } from 'react'

type Props = {
  setIsOpen: Dispatch<React.SetStateAction<boolean>>
}

const ChildComponent = ({ setIsOpen }: Props) => {
  function handleOkButton() {
    setIsOpen(true)
  }

　・・・（省略）

親コンポーネント

子コンポーネントにStateのSetterメソッドを渡します。

const ParentComponent = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <ChildComponent setIsOpen={setIsOpen} />
  )
}