クリックカウンター

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 23/42。

State（状態）にはトリガー（通常はイベント）が必要です。onClick を使用して関数をボタンにバインドし、その中で state を変更します：

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

ループに沿って1回のクリックを追ってみましょう：クリック → setCount(count + 1) → Reactが再レンダリング → パラグラフが新しいカウントを表示。アロー関数に注目してください：onClick={() => setCount(count + 1)} は後で呼び出すための関数を渡します。onClick={setCount(count + 1)} と書くとレンダリング中に即座に呼び出されてしまい、これはよくあるバグの原因になります。

チャレンジ

簡単

定番のカウンターを作成します。

状態（state）を追加します: count の初期値を 0 に設定します（import の準備は完了しています）。
id="count" の span 内に現在のカウントを表示します。
クリックするたびにカウントが 1 ずつ増えるように +1 ボタンを実装します。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>