React Hooks Multiple Checkbox Example

Example for multi checkbox and all checking button with React hook

by yeongjun kim

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/global-input-react@2.0.10/dist/global-input-react.js"></script>
<div id="app"></div>

Babel + JSX

// import React, { useState } from "react"

const Item = { KEY1: 0, KEY2: 1 }

const App = props => {
  const [items, setItems]=React.useState({
  	all: false,
    checked: new Set(),
  });  
  
  const handleAllCheckboxChange = e => {
    const check = e.target.checked

    setItems({
      all: check,
      checked: new Set(check ? [Item.KEY1, Item.KEY2] : [])
    })
  }

  const handleCheckboxChange = e => {
    const checked = new Set(items.checked)
    const { item } = e.target.dataset

console.log(item)

    if (e.target.checked) {
      checked.add(+item)
    } else {
      checked.delete(+item)
    }

    setItems({
      all: checked.size === Object.keys(Item).length,
      checked: new Set(checked)
    })
  }
  
  return (
  	<div>
      <input 
        type="checkbox"
        id="all"
        onChange={handleAllCheckboxChange}
        checked={items.all}
      />
      <label htmlFor="all">all</label>
      <br/>
      <input 
        type="checkbox"
        id="checkbox1"
        data-item={Item.KEY1}
        checked={items.checked.has(Item.KEY1)}
        onChange={handleCheckboxChange}
      />
      <label htmlFor="checkbox1">checkbox1</label>
      <input 
        type="checkbox"
        id="checkbox2"
        data-item={Item.KEY2}
        checked={items.checked.has(Item.KEY2)}
        onChange={handleCheckboxChange}
      />
      <label htmlFor="checkbox2">checkbox2</label>
    </div>
  );
};


ReactDOM.render(
  <App />,
  document.getElementById('app')
);