CODEWITHSUNDEEP
reactjsreduxreact-redux
nathannewyen
nathannewyen

Reputation: 253

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

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

Upvotes: 0

Views: 573

Answers (2)

akhtarvahid
akhtarvahid

Reputation: 9769

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,

          };

Upvotes: 0

brijesh-pant
brijesh-pant

Reputation: 1145

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>

Upvotes: 1

Related Questions