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が設定されています。