問題一覧に戻る
初級状態管理
問題21: 数値のstate

数値のstateを使ってカウンターを実装します。インクリメント（増加）とデクリメント（減少）の操作を学びます。

import React, { useState } from 'react';

function Counter() {
  // 数値stateを宣言
  const [count, setCount] = useState();

  // インクリメント関数
  const increment = () => setCount(count  1);
  
  // デクリメント関数
  const decrement = () => setCount(count  1);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={}>-</button>
    </div>
  );
}

export default Counter;
···