Checkbox for select all in react js

Question

I wanted to create a select-all checkbox, each product row has a checkbox, once the checkbox is clicked it will take its product id, variations, and count to calculate and display the total price of the product selected. I wanted to do like when clicking on select all, all the other checks need to tick and display the total of all product prices, I did the code for each row checkbox and it work but I am not sure how to do for select all checkbox, need help on it, below are code, and https://codesandbox.io/s/select-all-checkbox-uzmllg this is codesand box.

import "./styles.css";
import React, { useEffect, useState } from "react";
export default function App() {
  const [isCheckAll, setIsCheckAll] = useState(false);
  const [checkedItems, setCheckedItems] = useState(
    JSON.parse(localStorage.getItem("checkedItems") || "[]")
  );
  useEffect(() => {
    localStorage.setItem("checkedItems", JSON.stringify(checkedItems));
  }, [checkedItems]);
  const addChecked = (itemId, variationId, qty) => {
    setCheckedItems([
      ...checkedItems,
      { ProductID: itemId, VariationID: variationId, Count: qty }
    ]);
  };

  const removeChecked = (itemId, variationId) => {
    const toBeRemove = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    if (toBeRemove) {
      checkedItems.splice(checkedItems.indexOf(toBeRemove), 1);
      setCheckedItems([...checkedItems]);
    }
  };

  const getCheckedStatus = (itemId, variationId) => {
    const found = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    return found !== null;
  };

  const handleSelectAll = (e) => {
    if (isCheckAll) {
      //
    }
  };
  return (
    <div className="App">
      {cartData.Result.map((shop) =>
          shop.ShopCartList.map((cart) => (
            <div key={cart.ShopID} md="12" lg="12">
              
                {cart.productCartList.map((items) => {
                  return (
                    <div key={items.VariationID} md="12" lg="12">
                      
                              <div id="additem" className="pt-5">
                                {items.Stock === 0 ? (
                                  <h6 className="bg-light text-danger font-weight-bold ">
                                    SOLD OUT
                                  </h6>
                                ) : (
                                  <input
                                    type="checkbox"
                                    value={getCheckedStatus(
                                      items.ProductID,
                                      items.VariationID
                                    )}
                                    onChange={(e) => {
                                      if (e.target.checked) {
                                        addChecked(
                                          items.ProductID,
                                          items.VariationID,
                                          items.Count
                                        );
                                      } else {
                                        removeChecked(
                                          items.ProductID,
                                          items.VariationID,
                                          items.Count
                                        );
                                      }
                                    }}
                                  />
                                )}
                              </div>
                      </div>
                  );
                })}
              </div>
            
          ))
        )}
      <div>
        <input
          type="checkbox"
          name="selectAll"
          id="selectAll"
          handleClick={handleSelectAll}
          isChecked={isCheckAll}
        />
        Select All
      </div>
    </div>
  );
}

Answer 1

In handleSelectAll you need to set checkedItems is all your array items. You dont need isCheckAll state, you can see check all status by verify length of your checkedItems

const flattenCartData = (cartData) => {
  const arr = [];
  cartData.Result.forEach((shop) => {
    shop.ShopCartList.forEach((cart) => {
      cart.productCartList.forEach((items) => {
        arr.push(items);
      });
    });
  });
  return arr;
};

export default function App() {
  const [checkedItems, setCheckedItems] = useState(
    JSON.parse(localStorage.getItem("checkedItems") || "[]")
  );
  const ITEMS = flattenCartData(cartData);
  const isCheckAll = checkedItems.length === ITEMS.length;
  useEffect(() => {
    localStorage.setItem("checkedItems", JSON.stringify(checkedItems));
  }, [checkedItems]);
  const addChecked = (itemId, variationId, qty) => {
    setCheckedItems([
      ...checkedItems,
      { ProductID: itemId, VariationID: variationId, Count: qty }
    ]);
  };

  const removeChecked = (itemId, variationId) => {
    const toBeRemove = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    if (toBeRemove) {
      checkedItems.splice(checkedItems.indexOf(toBeRemove), 1);
      setCheckedItems([...checkedItems]);
    }
  };

  const getCheckedStatus = (itemId, variationId) => {
    const found = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    return found !== undefined;
  };

  const handleSelectAll = (e) => {
    if (isCheckAll) {
      setCheckedItems([]);
    } else setCheckedItems([...ITEMS]);
  };

  return (
    <div className="App">
      {cartData.Result.map((shop) =>
        shop.ShopCartList.map((cart) => (
          <div key={cart.ShopID} md="12" lg="12">
            {cart.productCartList.map((items) => {
              return (
                <div key={items.VariationID} md="12" lg="12">
                  <div id="additem" className="pt-5">
                    {items.Stock === 0 ? (
                      <h6 className="bg-light text-danger font-weight-bold ">
                        SOLD OUT
                      </h6>
                    ) : (
                      <div>
                        <input
                          type="checkbox"
                          checked={getCheckedStatus(
                            items.ProductID,
                            items.VariationID
                          )}
                          onChange={(e) => {
                            if (e.target.checked) {
                              addChecked(
                                items.ProductID,
                                items.VariationID,
                                items.Count
                              );
                            } else {
                              removeChecked(
                                items.ProductID,
                                items.VariationID,
                                items.Count
                              );
                            }
                          }}
                        />
                        <span>{items.ProductName}</span>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        ))
      )}
      <div>
        <input
          type="checkbox"
          name="selectAll"
          id="selectAll"
          onChange={handleSelectAll}
          checked={isCheckAll}
        />
        Select All
      </div>
    </div>
  );
}

I have created a codesandbox . You can check, hope it help!