BFE.devでのAI解答例 - React コーディング問題
1. the React Counter app

以下が解答例です。

import React, { useState } from 'react';

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

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

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2 data-testid="count">{count}</h2>
      <button data-testid="increment" onClick={handleIncrement}>+</button>
      <button data-testid="decrement" onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Counter;

このコンポーネントでは、useStateフックを利用して、状態としてカウントの値を保持しています。handleIncrement関数とhandleDecrement関数によってカウントの値を更新しています。

それぞれのボタンには、onClick属性に対して対応する関数を渡しています。data-testid属性には、テストのためのIDが設定されています。