カウントアップ機能の実装

1. pages/practice/01.tsxのreturnで返すjsxを以下に置き換えてください。

<div className="mx-auto mt-10 max-w-4xl">
  <div className="flex justify-center">
    <div>
      <h2 className="mb-4 text-center text-6xl">{count}</h2>
      <Button label="カウントアップ" variant="primary" />
    </div>
  </div>
</div>

2. useStateで管理されたButtonのonClickイベントの実装

• ButtonにonClick属性を追加してください。
• state変数を定義してください。変数名は"count", セッター関数はsetCountとします。
• 追加したonClick属性にsetCount内でcountを1追加する関数を設定してください。

※注意点

• state変数は必ず関数コンポーネントの定義内かつ、returnより前で宣言してください。
• onClick属性で指定するのは実行する関数の「コールバック関数」です。コールバック関数は関数定義として記述します。
• state変数は「const [name, setName] = useState(初期値)」のように指定します。nameや初期値の部分は適切な文字列に適宜修正してください。

3. onClickイベント内の関数定義をreturnの外に書き出す

#2 で正しく実装を行うと、ButtonコンポーネントのonClickイベントには以下のようなコールバック関数が定義されます。

setCount( count + 1 )

つまり、Buttonコンポーネント全体は以下のようになります。

          <Button
            onClick={() => setCount(setCount( count + 1 ))}
            label="カウントアップ"
            variant="primary"
          />

【お題】

• onClickイベント内の関数定義をreturnの上部（state変数宣言の下）に書き出してください。

※注意点

• 関数はアロー関数で定義してください。
• 関数を代入する変数は、「onClickCountUp」としてください。

4. onClickCountUpの修正

onClickCountUpの関数定義部分を正しく記載すると、以下のようになります。
const onClickCountUp = setCount(count + 1)

しかしこれでは、onClickCountUp内で複数のsetCount関数を実行しても、一番したの文しか実行されません。

• 関数定義の部分を以下に書き直してください。

修正前

  const onClickCountUp = () => {
    setCount(count + 1);
  };

修正後

  const onClickCountUp = () => {
    setCount((prevState) => prevState + 1);
  };