title: How to delete The array item in react js?
body: <p>Code:-.</p>
  <p>Parent component</p>
  <pre><code>const LeftNav = () =&gt; {
  return (
  
              &lt;div className=&quot;allDivs&quot;&gt;
                  {item.map((items, index) =&gt; {
                      //   console.log(item)
  
                      return (
                          &lt;div key={index} &gt;
                              &lt;TabHeader item={items} index={index} DeleteItemlist={item}/&gt;
                          &lt;/div&gt;
                      )
                  })}
              &lt;/div&gt;
  
   &lt;/div &gt;
      )
  }
  export default LeftNav;
  </code></pre>
  <p>Child componentL;-</p>
  <pre><code>export default function TabHeader({ item, index }) {
  
  
  const handleToggle = useCallback((e, ID, channelName) =&gt; {
          DeleteItemlist(itemList.filter(item =&gt; item.val !== channelName));
      }, [])
  return (
          &lt;Fragment&gt;
              &lt;div id=&quot;CLOSEDIV&quot;&gt;
                  &lt;div className=&quot;TableText&quot; onClick={(e) =&gt; { handleOnClick(e, Delete.val) }}&gt;
                      &lt;div id=&quot;SHOW&quot;&gt;{Delete.val}&lt;/div&gt;
                  &lt;/div&gt;
  &lt;div className=&quot;CloseIcon&quot; id=&quot;CloseBtn&quot;&gt;&lt;FaRegTimesCircle
                      style={{ color: &quot;#FC0000&quot;, width: &quot;20px&quot;, height: &quot;20px&quot;, alignItems: &quot;right&quot; }}
                      onClick={(e) =&gt; { handleToggle(e, index, Delete.val) }} /&gt;&lt;/div&gt;
              &lt;/div&gt;
  &lt;/div&gt;
   &lt;/Fragment &gt;
  
      )
  }
  </code></pre>
  <p>its working fine when there is only one div but when there is more than 1 div they close all the div
  how can i close 1 div at a one time?</p>
  <p>please help..</p>