Reactでラベルをクリックしたときにチェックボックスの状態を変化させる

実現したいこと

• ソースコード

import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <input type='checkbox' id='check1' />
      <label>Click for checkbox</label>
    </div>
  )
}

export default App;

• 表示画面

上記のようにチェックボックスとそれに対応させたいラベルがあった場合にラベルをクリックした際もチェックボックスの状態を変化させたい。

実現方法

• ソースコード

import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <input type='checkbox' id='check1' />
      <label htmlFor='check1'>Click for checkbox</label>
    </div>
  )
}

export default App;

• 表示画面

※ 見た目上は変化なし

labelにhtmlForを追加してcheckboxのIDを指定すればOK
Click for checkboxの文字をクリックした際もCheckboxの状態が変化するようになる