React doing a summation of checked checkbox item's prices

Hi I am doing a simple shopping cart. Each cart item has a checkbox next to it, that when checked, adds that item to an orderedItems array, and then the app prints out the sum of all checked items.

I have set it up so that each item is a child component, and in the parent I set up a handleChange event handler that is hooked to the onChange property of the checkbox. The problem is, I have no idea on how to "pass" the Item component for the certain checkbox into the parent.

For a live demo of the app, check this out
https://codesandbox.io/s/checkbox-summation-p29pm?file=/src/Item.js:28-239

export default function App() {
  const allItems = AllItems;
  const [orderedItems, setOrderedItems] = useState([]);

  const handleChange = (event) => {
    console.log(event);
    if (event.target.checked) {
      console.log("checked", event.target.name);
      // add item to orderedItems array
    } else {
      // remove item from orderedItems array
    }
  };

  return (
    <div className="App">
      {allItems.map((item) => (
        <Item item={item} key={item.name} handleChange={handleChange} />
      ))}

      <div>
        Total ={" "}
        {orderedItems.length === 0
          ? "0"
          : orderedItems.reduce((acc, item) => {
              return acc + Number(item.price);
            }, 0)}
      </div>
    </div>
  );
}

ITEM COMPONENT:

const Item = ({ item, handleChange }) => {
  return (
    <div>
      <input type="checkbox" name={item.name} onChange={handleChange} />
      {item.name} ${item.price}
    </div>
  );
};

export default Item;

>Solution :

Since you are not maintaining it as a group, you can use the state to maintain the cart item every time. So you need to pass the item data and event data in handleChange.

Item Component:

const Item = ({ item, handleChange }) => {
  return (
    <div>
      <input type="checkbox" name={item.name} onChange={event => handleChange(item, event)} />
      {item.name} ${item.price}
    </div>
  );
};

export default Item;

and in the App component, you will be able to handle the data. I have handled it in this way (I have added another state variable to get total cost, I don’t want to run loop every time I make the change so I maintained the state)

const handleChange = (item, event) => {
    if (event.target.checked) {
      setOrderedItems((cartItem) => [...cartItem, item]);
      setTotalCost((total) => total + parseInt(item.price));
      // add item to orderedItems array
    } else {
      // remove item from orderedItems array
      setOrderedItems((cartItem) =>
        cartItem.filter((i) => i.name !== item.name)
      );
      setTotalCost((total) => total - parseInt(item.price));
    }

Here you can have the runnable code
https://codesandbox.io/s/checkbox-summation-forked-0wnp9?file=/src/App.js:296-750