Get multiple checkbox value in reactjs

Question

am tried to list my products details in table with check box, then i need to get some product id with is going to checked

Here my code

const [products, setProducts] = React.useState([]);

     const preload = async () => {
         const data = await getAllActiveProducts();
         const loadedproducts = []; 

          for(const key in data){
            loadedproducts.push({
              id: key,
              pid: data[key]._id,
              name: data[key].name,
              price: data[key].price,
              inventory: data[key].inventory,
              image: data[key].image
            })
          }

          console.log(loadedproducts);
          setProducts(loadedproducts);
     }

     React.useEffect(() => {
          preload(); 
     }, []);

     const productsList = products.map(product => 
        <ActiveProductItem 
        key = {product.id} 
        id = {product.pid}
        name = {product.name}
        description = {product.description}
        price = {product.price}
        SKU = {product.SKU}
        inventory = {product.inventory}
        image = {product.image}
        productStatus = {product.productStatus}
        />);

ActiveProductItem code is here

const ActiveProductItem = (props) => {
  
    const { name, price, SKU, inventory, image, id, key} = props;
    const [selectedProducts, setSelectedProducts] = React.useState([]);

  return (
  
    <tbody>
   <tr>
        <td><input type="checkbox" onClick={(event) =>{
                                            const checkedproducts = selectedProducts; 
                                            if (event.target.checked) {
                                                
                                                const value =  event.target.value;
                                            console.log(value);
                                            checkedproducts.push({id});
                                            setSelectedProducts([
                                                ...selectedProducts,
                                                {
                                                  id: id
                                                },
                                              ]);
                                        }else {
                                            // remove from list
                                            setSelectedProducts(
                                                selectedProducts.filter((product) => product.id !== id),
                                            );
                                          }
                                          console.log(selectedProducts);
                                          console.log(checkedproducts);
                                        }} name="prod-item" value={id}/></td>
                                        <td><span class="admin-list-img"><img src={`${API}/${image}`} alt="" /></span></td>
                                        <td>
                                            <div class="">
                                                <a href="edit-product.html"><u>{name}</u></a>
                                            </div>
                                            <span>SKU: <span>{SKU}</span></span>
                                        </td>
                                        <td>${price}</td>
                                        <td>{inventory}</td>
                                    </tr>
     
    </tbody>
  );
};

UPDATED

 const productsList = products.map(product => 
        <ActiveProductItem 
        key = {product.id} 
        id = {product.pid}
        name = {product.name}
        description = {product.description}
        price = {product.price}
        SKU = {product.SKU}
        inventory = {product.inventory}
        image = {product.image}
        productStatus = {product.productStatus}
        handler = {checkHandler}
        />);

I tried both array push method and set state too but result always show the single id which checked the last

Please tell me what i did wrong , am very very new to reactjs Thank you

const [selectedProducts, setSelectedProducts] = React.useState([]); should be part of parent component and not per productItem. Pass the onclick event to parent component and handle the state in parent component to save the state. — Santosh Karanam
– Santosh Karanam, Commented Apr 7, 2022 at 10:40
i tried from parent component and pass the function to child , but when the page is load it automatically call the function — Meena Arumugam
– Meena Arumugam, Commented Apr 7, 2022 at 11:20
every time the products are updated the child Component - ActiveProductItem will be updated as it is re-rendered here - products.map. One way to solve is to move - const [selectedProducts, setSelectedProducts] = React.useState([]); to parent and pass the onclick to parent — Santosh Karanam
– Santosh Karanam, Commented Apr 7, 2022 at 12:54
** const productsList = products.map(product => <ActiveProductItem key = {product.id} id = {product.pid} name = {product.name} description = {product.description} price = {product.price} SKU = {product.SKU} inventory = {product.inventory} image = {product.image} productStatus = {product.productStatus} onClick = {checkHandler} />); ** actually am done these things and const [selectedProducts, setSelectedProducts] = React.useState([]); to parent — Meena Arumugam
– Meena Arumugam, Commented Apr 7, 2022 at 13:16
after moving to parent, change - setSelectedProducts([...selectedProducts, { id: id }]); to selectedProducts.push({ id: id }); setSelectedProducts(selectedProducts); — Santosh Karanam
– Santosh Karanam, Commented Apr 7, 2022 at 13:29

João Glória · Accepted Answer · 2022-04-07 10:43:02Z

1

The real problem is that you are storing the collected values in the Item component itself. If you want to store a collection of checked items you need to do it in the parent component (the one rendering the collection of items). In the component you should keep state - let's call it checkedItems - , and give every item a callback to signal the parent with a check/uncheck. Then you can use that signal to add the incoming id to checkedItems.

answered Apr 7, 2022 at 10:43

João Glória

114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Meena Arumugam Over a year ago

** const productsList = products.map(product => <ActiveProductItem key = {product.id} id = {product.pid} name = {product.name} description = {product.description} price = {product.price} SKU = {product.SKU} inventory = {product.inventory} image = {product.image} productStatus = {product.productStatus} onClick = {checkHandler} />); ** this method is automatically call the function without clicking and when i click the checked box it doesn't work Help me yaar

João Glória Over a year ago

The onClick function should come from the parent component, as in ``` // parent.js const updateSelectedProducts = (id) => { setSelectedParents([id, ...selectedParents]); }; ... <ActiveProductItem updateItem={updateSelecteProducts}... // active-product-item.js ... <input type="checkbox" onClick={(event) => updateItem(event.target.value)} ... ```

Collectives™ on Stack Overflow

Get multiple checkbox value in reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related