title: how to use setState inside an event handler function in React?
body: <p>This is in my return which is mapped from an array,</p>
  <pre><code>&lt;div className='flex gap-4 items-center py-3' key={x.id}&gt;
      &lt;input name={props.name} className='hover:cursor-pointer hover:text-customviolet' value={x.name} id={x.id} type=&quot;checkbox&quot; onChange={handleCheck} /&gt;
      &lt;label className='hover:text-customviolet hover:cursor-pointer' htmlFor={x.id}&gt;{x.name}&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My code:</p>
  <pre><code>const [localId, setLocalId] = React.useState([])
  
  const handleCheck = (event) =&gt; {
     var updatedList = [...localId];
  
     if (event.target.checked) {
       updatedList = [...localId, event.target.id];
     } else {
       updatedList.splice(localId.indexOf(event.target.id), 1);
     }
  
     setLocalId(updatedList)     &lt;&lt;&lt;------ This setState is not being trigerred
  
     props.setData(&quot;brands=&quot; + updatedList)
     }
  </code></pre>
  <p>I have a checkbox which is mapped from an array and return several checkboxes. When a checkbox is checked, <code>setLocalId(updatedList)</code> is not being triggered at all. Thus my <code>localId</code> is always empty. Any help please.</p>