glass mist
I have these functions that I declared in the parent component and I am using this:
{data ? (
<CartComponent
cart={cart}
addQuantity={addQuantity}
reduceQuantity={reduceQuantity}
removeFromCart={removeFromCart}
waterTypes={waterTypes}
addToCart={addToCart}
/>
) : (
<p>No data</p>
)}
And the cart component: I can see the data but I cannot click on the buttons
interface CartComponentProps {
//rest of the codes
addQuantity: (itemId: string) => void;
reduceQuantity: (itemId: string) => void;
removeFromCart: (itemId: string) => void;
addToCart: (waterType: WaterType) => void;
}
const CartComponent: React.FC<CartComponentProps> = ({
cart,
addQuantity,
reduceQuantity,
removeFromCart,
addToCart,
}) => {
return (
<div>
<h1>Water Available:</h1>
{data.map((dataItem) => (
<div key={dataItem.id}>
<strong>Name:</strong> {dataItem.name}, <strong>Price:</strong> {waterType.price}
<button onClick={() => addToCart(dataItem)}>Add to Cart</button>
</div>
))}
<div>
Your Cart
</div>
<h2>Your Cart</h2>
<ul>
{cart.map((item) => (
<li key={item.id}>
<p>{item.name} - ${item.price} </p>
<p>Liter: {item.quantity}</p>
<p>Unit price: {item.quantity * item.price}</p>
<button onClick={() => addQuantity(item.id)}>+ Add more Liter(s)</button>
<button onClick={() => reduceQuantity(item.id)}>- Reduce Liter(s)</button>
<br />
<button onClick={() => removeFromCart(item.id)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default CartComponent;
cyan acorn