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;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