title: State is not Reflecting after calling HandleCheck Method in React Product List Program
body: <p>I am trying to build a product list with selectAll functionality but when I'm clicking on selectAll checkBox the state[checkBoxes Array] isn't reflecting the other checkboxes after calling handleCheck() method.
  I have also used useEffect() with chkAll as a dependency, but the problem didn't resolve.
  Please help me to resolve this problem</p>
  <p><a href="https://i.stack.imgur.com/ZFY4W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZFY4W.png" alt="enter image description here" /></a></p>
  <p>Whole Code...</p>
  <pre><code>import React, { useEffect, useState } from 'react'
  import { Card,Container, Row, Col,Button,Media,Form,Tooltip } from &quot;react-bootstrap&quot;;
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faSearch,faFilter, faTimes,faEdit } from '@fortawesome/free-solid-svg-icons';
  import Checkbox from '../CustomCheckbox/CustomCheckbox';
  import './ProductListData.css'
  
  const styles = {
      mediaItem: {
      //   margin:'1rem',
      //   border: &quot;1px solid gray&quot;,
        backgroundColor: &quot;#f5f5f5&quot;,
   
      },
      mediaItemButtons: {
        paddingTop: &quot;5px&quot;,
        paddingBottom: &quot;5px&quot;
      }
    };
  
  export default function P2({products,allCheck,setAllCheck}) {
      var f=0;
      const [state,setState]=useState({
          checkedBoxes:[],
          
      })
      const [chkBox,setChkBox]=useState(false)
      const [q,setQ]=useState(&quot;&quot;)
  
      const Search=(products)=&gt;{
          return products.filter(product=&gt;
           product.name.toLowerCase().indexOf(q.toLowerCase())!==-1 || //str.includes(PATTERN)
           product.price.toLowerCase().indexOf(q.toLowerCase())!==-1 ||
           product.manufacturer.toLowerCase().indexOf(q.toLowerCase())!==-1
           );
       
         // return products.filter(product=&gt;product.name.toLowerCase()===q.toLowerCase())
          }
  
      const handleCheck=(e,product)=&gt;{
          let itemName=e.target.name;
          let checked=e.target.checked;
          if(itemName==='checkAll'){
              if(checked){
              setChkBox(true)
                  setState(prevState=&gt;{
                     let  {checkedBoxes}=prevState;
  
                      let categories = new Set(checkedBoxes)
                      
                      
  
                      for(var i=0;i&lt;products.length;i++)
                      categories.add(products[i].id)
                      checkedBoxes=Array.from(categories)
                      return {...prevState.checkedBoxes,  checkedBoxes: checkedBoxes }
  
                  })
             console.log(&quot;Checked&quot;,state.checkedBoxes);
          }
          else{
              setChkBox(false);
  
             setState(prevState=&gt;{
                  let {checkedBoxes}=prevState;
                 checkedBoxes.splice(0, checkedBoxes.length)
                 return {...prevState.checkedBoxes, checkedBoxes: checkedBoxes };
             });
             console.log(&quot;UnChecked&quot;,state.checkedBoxes);
          }
          }
  
          else if(checked) {
              var arr = state.checkedBoxes;
              arr.push(product.id);
              
              setState(state=&gt;({...state,checkedBoxes:arr}));
          } else {            
              let products = state.checkedBoxes.splice(state.checkedBoxes.indexOf(product.id), 1);
              
              setState(state=&gt;({...state,checkedBoxes:products}));
          }   
      }
     
  
      return (
          &lt;&gt;
            &lt;div className='products'&gt;
                   &lt;Card  className='cardpl'&gt;
                   &lt;Card.Header className='header'&gt;
                       &lt;div className='header-filter'&gt;
                       &lt;input
                            // id={id}
                            name='checkAll'
                            type=&quot;checkbox&quot;
                            checked={chkBox}
                            onChange={(e)=&gt;handleCheck(e)}
                            
                        /&gt;
                          {/* &lt;Checkbox 
                            number={1000}  
                            isChecked={false} lebal={'Chk'}/&gt; */}
  
                          &lt;div className='search-bar' &gt;
                            &lt;FontAwesomeIcon icon={faSearch} /&gt;
  
                            &lt;input type=&quot;text&quot; value={q} placeholder=&quot;Search Products&quot; onChange={(e)=&gt;{setQ(e.target.value)}}/&gt;
                            
                            &lt;/div&gt;
                            &lt;div className='filter-icon'&gt;
                            &lt;Button className='filter-button' style={{background:'transparent',color:'#3c44b1',border:'none',boxShadow:'none'}}&gt; &lt;FontAwesomeIcon icon={faFilter} /&gt;&lt;/Button&gt;
                            &lt;/div&gt;
                            {/* &lt;FontAwesomeIcon icon={f}/&gt; */}
                     &lt;/div&gt;
                    &lt;/Card.Header&gt;
                   &lt;Card.Body className='productListBody overflow-auto custom-scrollbar-css '&gt;
  
  
  
                   
              &lt;p&gt;{products.length!==0?Search(products).map((product,id)=&gt;(
                  &lt;div style={{display:'flex',alignItems:'center',border:'1px solid #dee2e6',margin:'.5rem'}}&gt;
               {/* &lt;Checkbox
               number={id}
               isChecked={false}
               /&gt; */}
               
               &lt;input
                  id={id}
                  type=&quot;checkbox&quot;
                  name={product.id}
                  value={product.id}
                  checked={state.checkedBoxes.find((p) =&gt; p.id === product.id)}
                  onChange={(e) =&gt; handleCheck(e, product)}
  
          /&gt;
              &lt;Media key={product.id} 
                      style={{padding:'.5rem',flex:'1'}} className={styles.mediaItem}&gt;
                              &lt;img
                                  width={100}
                                  height={100}
                                  className=&quot;align-self-center mr-3&quot;
                                  src=&quot;https://i5.walmartimages.com/asr/e73e1252-642c-4473-93ea-fd3b564a7027_1.3e81ea58fa3042452fe185129a4a865f.jpeg?odnWidth=undefined&amp;odnHeight=undefined&amp;odnBg=ffffff&quot;
                                  alt=&quot;Generic placeholder&quot;
                              /&gt;
                              
                              &lt;Media.Body className={styles.mediaBody}&gt;
                                  &lt;p&gt;&lt;b&gt;{product.name}&lt;/b&gt;&lt;/p&gt;
                                  &lt;Row  className='product-row'&gt;
                                  &lt;Col className='product-col' xs={2}&gt;
                                      &lt;strong&gt;By:&lt;/strong&gt;{product.manufacturer}
                                  &lt;/Col&gt;
                                  &lt;Col className='product-col' xs={2}&gt;&lt;b&gt;4.5&lt;/b&gt;/5&lt;/Col&gt;
                                  &lt;Col className='product-col' xs={2}&gt;
                                      &lt;strong&gt;${product.price}&lt;/strong&gt;
                                  &lt;/Col&gt;
                                  &lt;Col className='product-col' xs={2}&gt;&lt;strong&gt;Stock&lt;/strong&gt;{product.stock}&lt;/Col&gt;
                                  &lt;Col xs={2} style={{minWidth:'10rem'}}&gt;
                                      &lt;div className='action-button'&gt;
                                      &lt;Button variant=&quot;primary&quot; size=&quot;sm&quot;&gt;
                                      &lt;FontAwesomeIcon icon={faEdit}/&gt;
                                      &lt;/Button&gt;
                                      &lt;Button variant=&quot;danger&quot; size=&quot;sm&quot;&gt;
                                      &lt;FontAwesomeIcon icon={faTimes}/&gt;
                                      &lt;/Button&gt;
                                      &lt;/div&gt;
                                  &lt;/Col&gt;
                                  &lt;/Row&gt;
  
  
                                 
                              &lt;/Media.Body&gt;
                              &lt;/Media&gt;&lt;/div&gt;)):null}
                              
                  &lt;/p&gt;    
                  &lt;/Card.Body&gt;   
                             
                           
                             &lt;/Card&gt;
                             &lt;/div&gt;
          &lt;/&gt;
      )
  }
  </code></pre>