Así que estoy tratando de eliminar el artículo del carrito si el usuario hace clic en un botón.

Creé un componente Cart.js que muestra todos los objetos de mi conjunto de objetos.

El código que muestra elementos en el componente Cart se ve así

Cart.js

 {props.orderItems.map((item) => { return ( <div key={item.id} className="content__orders"> <div className="orders__item"> <p>{item.name}</p> <p>{item.price}zł</p> <input type="submit" onClick={onItemDelete(item)} /> </div> </div> ); })}

y el método onItemDelete() parece

 const onItemDelete = (event) => { orderItems.filter((item) => item === event); };

El problema es que todo se elimina en el procesamiento de componentes y no puedo entender qué está sucediendo. El controlador de eventos onClick debería funcionar solo al hacer clic, pero de alguna manera solo funciona al renderizar y no sé por qué.

Intenté verificar qué console.log(event) mostrará, pero muestra todos los elementos en orderItems que es una matriz de objetos.

¿Cómo puedo obtener solo un elemento de la matriz y eliminarlo?