import ReactDOM from 'react-dom'
import React, { useState } from 'react'

function App() {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)

  // 問題1. スタートボタンクリック時の処理を実装しよう
  const startTimer = () => {
    setIsRunning(true)
  }

  // 問題2. ストップボタンクリック時の処理を実装しよう
  const stopTimer = () => {
    setIsRunning(false)
  }

  // 問題3. リセットボタンクリック時の処理を実装しよう
  const resetTimer = () => {
    setTime(0)
  }

  return (
    <div>
      <h1>タイマー</h1>
      <h2>{time}秒</h2>
      {/* 問題1. スタートボタンクリック時の処理を実装しよう */}
      {/* 問題2. ストップボタンクリック時の処理を実装しよう */}
      {isRunning ? (
        <button onClick={stopTimer}>ストップ</button>
      ) : (
        <button onClick={startTimer}>スタート</button>
      )}
      {/* 問題3. リセットボタンクリック時の処理を実装しよう */}
      <button onClick={resetTimer}>リセット</button>
    </div>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

イベントハンドラ

import ReactDOM from 'react-dom'
import React, { useState } from 'react'

function App() {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)

  // 問題1. スタートボタンクリック時の処理を実装しよう

  // 問題2. ストップボタンクリック時の処理を実装しよう

  // 問題3. リセットボタンクリック時の処理を実装しよう

  return (
    <div>
      <h1>タイマー</h1>
      <h2>{time}秒</h2>
      {/* 問題1. スタートボタンクリック時の処理を実装しよう */}
      {/* 問題2. ストップボタンクリック時の処理を実装しよう */}
      {isRunning ? <button>ストップ</button> : <button>スタート</button>}
      {/* 問題3. リセットボタンクリック時の処理を実装しよう */}
      <button>リセット</button>
    </div>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


ボタンクリック時の処理を実装しよう

まずは必要なスキルを確認しましょう！