So I'm trying to delete item from Cart if user click a button.

I've made a Cart.js component which shows every object from my array of objects.

Code which shows elements in Cart component looks like this

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

and the onItemDelete() method looks like

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

The problem is everything deletes on Component render and I can't figure out what is happening. The onClick event handler should works only on click but somehow it only works on render and I don't know why.

I've tried to check what console.log(event) will show but it shows every element in orderItems which is array of objects.

How can I get only one item from the array and delete it?