React Hooksを使用した親コンポーネントのstateを子コンポーネントから変更する方法を教えてください

Question

React Hooksを利用した場合での、子コンポーネントから親コンポーネントのstateを変更する方法をご教示いただけないでしょうか。

動作はしませんがご回答いただける場合の参考になるかと思い、下記にサンプルを用意いたしました。
よろしければご参照ください。
サンプル

ソースコード

index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Buttons from "./Buttons";

const Test = () => {
  const [count /* , setCount */] = useState(0);

  return (
    <React.Fragment>
      <p>{count}</p>
      <Buttons />
    </React.Fragment>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Test />, rootElement);

Buttons.jsx

import React/* , { useState } */ from "react";

const Buttons = () => {
  return (
    <React.Fragment>
      <button>+ 1</button>
      <button>- 1</button>
    </React.Fragment>
  );
};

export default Buttons;

コンポーネントを切り分けない場合

Buttonsコンポーネントを作らずindex.jsのみで完結させる場合におけるstateの変更はできました。

サンプル

import React, { useState } from "react";
import ReactDOM from "react-dom";

function Test() {
   const [count, setCount] = useState(0);

  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button onClick={() => setCount(count - 1)}>
        -1
      </button>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Test />, rootElement);

しかし、可読性やメンテナンス性を上げるために、できるだけコンポーネントを切り分けたいと考えています。

また、stateの配置を親コンポーネント、stateの変更は子コンポーネントにするという発想は、React公式ドキュメントの下記ページを参考にしています。
Step 4: state をどこに配置するべきなのかを明確にする

上記ページの次の項↓
Step 5: 逆方向のデータフローを追加する
で、子から親にあるstateの変更方法が書かれていますが、実装例がHooksを利用していないため、Hooksを利用した場合の方法を知りたいと思い質問した次第です。

Answer 1

こんにちは

たとえば、ボタンを以下のような子コンポーネント MyButton に切り分けます。

const MyButton = ({label, onClick}) => (
  <button onClick={onClick}>
    {label}
  </button>
);

上記を使って、親コンポーネントの以下の部分

修正前

      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button onClick={() => setCount(count - 1)}>
        -1
      </button>

を以下のように修正します。

修正後

      <MyButton onClick={() => setCount(count + 1)} label="+1" />
      <MyButton onClick={() => setCount(count - 1)} label="-1" />

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/abzJyPX?editors=0010

Answer 2

子から親にあるstateの変更方法が書かれていますが、実装例がHooksを利用していないため、Hooksを利用した場合の方法を知りたいと思い質問した次第です。

Hooksであろうがなかろうが、全く同じです。setStateを子コンポーネントに引き回してください。