【初心者向け】Next.jsで子コンポーネントから親コンポーネントにデータを渡す方法

はじめに

子コンポーネントで取得したデータを親コンポーネントに渡す方法はいくつかありますが、今回はその中でも最も簡単な方法をご紹介します。

前提条件

Next.jsのプロジェクトが作成済みで、サーバーが正常に立ち上がっている状態であること。

目次

1. 全体の流れ
2. 実装

1. 全体の流れ

全体の流れとしては、親コンポーネントでuseStateを定義し、そのset関数を子コンポーネントに渡します。
子コンポーネントで取得したデータを渡されたset関数に引数として渡すことで、親コンポーネントの状態を更新します。
これにより、親コンポーネント側で子コンポーネントのデータを利用できるようになります。

2. 実装

今回はapp/page.tsxを親コンポーネントとします。
以下のように実装します。
親コンポーネントでuseStateを定義し、setData関数を子コンポーネントに渡します。

app/page.tsx

'use client';

import { Children } from "@/components/Children";
import { useState } from "react";

export default function Home() {
  const [data, setData] = useState("test");

  return (
    <>
      <div>
        <Children setData={setData}/>
        <div>{data}</div>
      </div>
    </>
  );
}

次に子コンポーネントを作成します。
srcディレクトリ内にcomponentsディレクトリを作成し、その中にChildren.tsxを作成します。

src/components/Children.tsx

import { useEffect } from "react";

type Props = {
  setData: (data: string) => void;
};
export const Children = (props: Props) => {
  useEffect(() => {
    const childrenData = "子からのデータ";
    props.setData(childrenData);
  }, []);

  return (
    <>
      <div>子コンポーネント</div>
    </>
  );
};

Childrenコンポーネントでは、受け取ったsetData関数にchildrenDataを引数として渡しています。
これで、子コンポーネントのデータが親コンポーネントで反映されるようになります。

終わりに

親コンポーネントから子コンポーネントへのデータの受け渡しは簡単ですが、子コンポーネントから親コンポーネントにデータを渡すにはどうすればいいのか疑問に感じる方も多いのではないでしょうか？
この方法を使えば、シンプルに実装できるので、ぜひ活用してみてください。