【React】関数コンポーネントで親のstateを子にpropsとして渡す方法

はじめに

Reactで関数コンポーネントを使い、親のstateを子にpropsとして渡す方法（stateのリフトアップ）についてまとめました。

この記事では、１回クリックするとテキストがbananaからappleに変更されるボタンを作成します。
説明用に極力シンプルなコードにしています。
ご自身のコードに置き換えて頂いて、ご参考になればと思います。
また、この記事の内容に不備が御座いましたらご指摘頂けますと幸いです。

何の為に親のstateを子にpropsとして渡すのか

複数の子コンポーネントからデータを集めたり、コンポーネント同士を互いにやりとりさせる為には、
親コンポーネント内で共有のstateを宣言する必要があります。

環境

React：17.0.2
node.jsとnpmがインストールされていることが前提です。

準備

npx create-react-app my-app
cd my-app
npm start

ターミナルの新しいウィンドウを開き、以下のコマンドを実行して必要なディレクトリとファイルを作成します。

mkdir src/components
touch src/components/{Fruits.jsx,FruitsButton.jsx}

実装

まずは、stateのリフトアップをしないで書いてみます。

{/* Fruits.jsx */}

import React, { useState } from "react";

const Fruits = () => {
  const [fruit, setFruit] = useState("banana");
  return <button onClick={() => setFruit("apple")}>{fruit}</button>;
};

export default Fruits;

{/* App.js */}


import "./App.css";
import Fruits from "./components/Fruits";　{/* 追加 */}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Fruits /> {/* 追加 */}
      </header>
    </div>
  );
}

export default App;

stateのリフトアップをするとこうなります。

{/* Fruits.jsx(親コンポーネント) */}

import React, { useState } from "react";
import FruitsButton from "./FruitsButton";

const Fruits = () => {
  const [fruit, setFruit] = useState("banana");
{/* 状態を"apple"に変える関数を定義*/}
  const ReplaceFruit = () => {
    setFruit("apple");
  };
  {/* propsとして子に渡すのは{fruit} は(現在の状態"banana")とReplaceFruit関数 */}
  return <FruitsButton fruit={fruit} onClick={ReplaceFruit} />;
};

export default Fruits;

{/* FruitsButton.jsx(子コンポーネント) */}

const FruitsButton = (props) => {
  return <button onClick={() => props.onClick()}>{props.fruit}</button>;
};

export default FruitsButton;

既に"apple"になっている方は一度ブラウザをリロードして下さい。

参考にしたサイト

ステートフックの利用法 – React
https://ja.reactjs.org/docs/hooks-state.html
06 新・日本一わかりやすいReact入門【基礎編】コンポーネントの状態管理
https://youtu.be/dTghhYtvPek