title: How to handle the the onClick events on CheckBox in react js
body: <blockquote>
  <p>I have an array called <strong>initialList</strong> the array contains three items these items have their own <strong>checkboxes</strong>, when I check on any of the items I want to push them into the <strong>list</strong> Array and at the same time remove them from the <strong>initialList array</strong>, I don't know what to write in the <strong>clickHandler function</strong> and how to render the <strong>list</strong> array</p>
  </blockquote>
  <pre><code>import React, { useState } from 'react'
  
  function CheckBox3() {
      const initialList = [{id: 1, name:'jim'},{id: 2, name: 'joe'},{id: 3, name: 'beth'}]
      const [list, setList] = useState([])
  
      const clickhandler = () =&gt; {
         
      }
      
      return (
          &lt;div&gt;
              &lt;ol&gt;
                  {initialList.map((item) =&gt; (
                      &lt;li key={item.id}&gt;{item.name}
                      &lt;input type=&quot;checkbox&quot; onClick={clickhandler} /&gt;
                      &lt;/li&gt;))}
              &lt;/ol&gt;
          &lt;/div&gt;
      )
  }
  
  export default CheckBox3
  </code></pre>