孤独プログラマー譚

孤独死が近い。

React hooks 全て選択チェックボックス

import React, { useState } from 'react';

const FooComponent = () => {
  const [a, setA] = useState(true)
  const [b, setB] = useState(true)
  const [c, setC] = useState(true)

  const selectAll = (e) => {
    let bool = e.target.checked ? true : false
    setA(bool)
    setB(bool)
    setC(bool)
  }

  return (
    <div className="App">
      <div>
        A<input type="checkbox" checked={a} onChange={() => setA(!a)} />
        B<input type="checkbox" checked={b} onChange={() => setB(!b)} />
        C<input type="checkbox" checked={c} onChange={() => setC(!c)} />
      </div>
      <div>
        All<input type="checkbox" onChange={selectAll} checked={a && b && c}/>
      </div>
    </div>
  )
};

export default FooComponent;