title: ReactJS: Manage multiple checkbox inputs with useState
body: <p>I have the following example component that uses multiple checkboxes for choosing what items to remove from a list of objects:</p>
  
  <pre><code>import React, { useState } from "react";
  import "./styles.css";
  
  const data = [
    {
      name: "test1",
      result: "pass"
    },
    {
      name: "test2",
      result: "pass"
    },
    {
      name: "test3",
      result: "pass"
    },
    {
      name: "test4",
      result: "pass"
    },
    {
      name: "test5",
      result: "pass"
    }
  ];
  
  export default function App() {
    const [allChecked, setAllChecked] = useState(false);
    const [isChecked, setIsChecked] = useState({});
    const [formData, setFormData] = useState(data);
  
    const handleAllCheck = e =&gt; {
      setAllChecked(e.target.checked);
    };
  
    const handleSingleCheck = e =&gt; {
      setIsChecked({ ...isChecked, [e.target.name]: e.target.checked });
    };
  
    const onDelete = () =&gt; {
      console.log(isChecked);
      const newData = data.filter(
        item =&gt; !Object.keys(isChecked).includes(item.name)
      );
      console.log(newData);
      setFormData(newData);
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;div&gt;
          &lt;label&gt;All&lt;/label&gt;
          &lt;input
            name="checkall"
            type="checkbox"
            checked={allChecked}
            onChange={handleAllCheck}
          /&gt;
          &lt;label /&gt;
        &lt;/div&gt;
        {formData.map((test, index) =&gt; (
          &lt;div key={index}&gt;
            &lt;label&gt;{test.name}&lt;/label&gt;
            &lt;input
              type="checkbox"
              name={test.name}
              checked={allChecked ? true : isChecked[test.name]}
              onChange={handleSingleCheck}
            /&gt;
          &lt;/div&gt;
        ))}
        &lt;button onClick={() =&gt; onDelete()}&gt;DELETE&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>This is mostly working, except for check all. It seems <code>onChange</code> will not update while using <code>useState</code>. I need to be able to select all the objects or uncheck some to mark for deletion.</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>CodeSandbox Example: <a href="https://codesandbox.io/s/modest-hodgkin-kryco" rel="nofollow noreferrer">https://codesandbox.io/s/modest-hodgkin-kryco</a></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Okay, after some help from Richard Matsen,</p>
  
  <p>Here is a new solution without direct DOM manipulation:</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import "./styles.css";
  
  const data = [
    {
      name: "test1",
      result: "pass"
    },
    {
      name: "test2",
      result: "pass"
    },
    {
      name: "test3",
      result: "pass"
    },
    {
      name: "test4",
      result: "pass"
    },
    {
      name: "test5",
      result: "pass"
    }
  ];
  
  export default function App() {
    const [allChecked, setAllChecked] = useState(false);
    const [isChecked, setIsChecked] = useState();
    const [loading, setLoading] = useState(true);
    const [formData, setFormData] = useState(data);
  
    const handleAllCheck = e =&gt; {
      setAllChecked(e.target.checked);
    };
  
    const handleSingleCheck = e =&gt; {
      setIsChecked({ ...isChecked, [e.target.name]: e.target.checked });
    };
  
    const onDelete = () =&gt; {
        const itemList = Object.keys(isChecked).map((key:any) =&gt; {
          if (isChecked[key] === true) {
            return key
          }
        })
        const result = formData.filter((item:any) =&gt; !itemList.includes(item.name))
        console.log(result)
        setFormData(result)
      }
  
    useEffect(() =&gt; {
      if (!loading) {
      setIsChecked(current =&gt; {
        const nextIsChecked = {}
        Object.keys(current).forEach(key =&gt; {
          nextIsChecked[key] = allChecked;
        })
        return nextIsChecked;
      });
      }
    }, [allChecked, loading]);
  
    useEffect(() =&gt; {
      const initialIsChecked = data.reduce((acc,d) =&gt; {
        acc[d.name] = false;
        return acc;
      }, {})
      setIsChecked(initialIsChecked)
      setLoading(false)
    }, [loading])
  
    return (
      &lt;div className="App"&gt;
        &lt;div&gt;
          &lt;label&gt;All&lt;/label&gt;
          &lt;input
            name="checkall"
            type="checkbox"
            checked={allChecked}
            onChange={handleAllCheck}
          /&gt;
          &lt;label /&gt;
        &lt;/div&gt;
        {!loading ? formData.map((test, index) =&gt; (
        &lt;div key={index}&gt;
          &lt;label&gt;{test.name}&lt;/label&gt;
          &lt;input
            type="checkbox"
            name={test.name}
            checked={isChecked[test.name]}
            onChange={handleSingleCheck}
          /&gt;
        &lt;/div&gt;
        )): null}
        &lt;button onClick={() =&gt; onDelete()}&gt;DELETE&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>codesandbox of working solution: 
  <a href="https://codesandbox.io/s/happy-rubin-5zfv3" rel="nofollow noreferrer">https://codesandbox.io/s/happy-rubin-5zfv3</a></p>