【React】子コンポーネントから親コンポーネントのStateを変更する！

はじめに

親コンポーネントからモーダル表示フラグを継承した際に、子コンポーネントから親コンポーネントへのStateを更新する方法について備忘録として残します。

実装イメージ

以下のようにモーダルで表示し、更新ボタンをクリック後にモーダルが消えるような実装を行います。
今回、モーダル表示を行うフラグが親コンポーネントにあり、更新ダイアログを子コンポーネントで作成しているものとしています。

サンプルコード

親コンポーネントでダイアログ表示を行うフラグを管理しています。

export const Parent: FC = memo(() => {
    // ダイアログ表示フラグの状態管理
    const [isOpen, setIsOpen] = useState(false);

    const showDialog = () => {
        setOpen(true);
    }

    return (
        {/*  省略 */}
        <Children
            setIsOpen={setIsOpen}
         />
         {/*  一部省略 */}
    )
}

子コンポーネントは以下のように実装します。
親コンポーネントから継承したsetIsOpenを用いてisOpenフラグを更新します。

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

export const Children: FC = memo((props) => {
    const { setIsOpen } = props;

    const updateSomething = (setIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
        // 何かしらの処理
        setIsOpen(false);
    }

    return (
        {/*  省略 */}
        <UpdateButton onClick={() => updateSomething(setIsOpen)}>
                更新
        </UpdateButton>
         {/*  一部省略 */}
    )
}

おわりに

Stateの管理は大変ですがしっかり覚えていきたいと思います！