I have two methods addItem and removeItem. I have also two buttons for these methods via onClick. When I click on addItem button then both methods are triggered, please why?
<button id="a" type="button" onClick={addItem} className="button button-size-small">Add to cart</button>
{items.map((item, index) => {
<button id="b" type="button" onClick={removeItem(item)}>Delete</button>
})}
const addItem = _ => {
const item = { id: (new Date).getTime(), userId, choosedFlavor, amount };
setItems([...items, item]);
}
const removeItem = item => {
console.log('remove', item);
}
removeItemfunction on every render instead of passing it toonClick. Try() => removeItem(item).