How can i pass multiple values into my function in react?

Question

I'm trying to send back a product values with onClick like this:

cart.js:

<RemoveButton
    type="submit"
    onClick={() => deleteItem(product.title, product.quantity, product.price)}
>
    Remove
</RemoveButton>

Here is my reducer.js:

case DELETE_SOME_ITEM:
    let items = state.products.filter(itemDelete => itemDelete.title === action.payload);
    console.log(action.payload);
    return {
        ...state,
        products: items,
            cartCost: state.cartCost - items.price,
            basketNumbers: state.basketNumbers - items.quantity,

    };

When I do console.log(action.payload) it just console product.title but not product.quantity and price

Here is my github project if you want to look over it:

https://github.com/nathannewyen/the-beuter

brijesh-pant · Accepted Answer · 2020-08-07 05:36:24Z

1

Typo here, it should be

<RemoveButton
    type="submit"
    onClick={() => deleteItem({title: product.title, quantity: product.quantity, price: product.price})} // this should be an object, currently you are passing 3 parameters, so payload only have the 1st parameter
>
    Remove
</RemoveButton>

answered Aug 7, 2020 at 5:36

brijesh-pant

1,1851 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nathannewyen Over a year ago

Thank you! It helped me. I will mark as solved after 9mins

akhtarvahid · Accepted Answer · 2020-08-07 06:13:31Z

0

Let's write in a clean and concise way. You can pass the complete object(product) instead of passing (title, quantity, price).

cart.js

<RemoveButton
    type="submit"
    onClick={() => deleteItem(product)}>
    Remove
</RemoveButton>

reducer.js

case DELETE_SOME_ITEM:
    let items = state.products.filter(itemDelete => itemDelete.title === action.payload.title);
    console.log(action.payload);
    return {
        ...state,
        products: items,
            cartCost: state.cartCost - items.price,
            basketNumbers: state.basketNumbers - items.quantity,

          };

answered Aug 7, 2020 at 6:13

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

How can i pass multiple values into my function in react?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related