updating Redux state based off of index in array

Question

I have a food truck app where I have stored the customer order in redux state as an array of objects. Each order lists each item the customer has selected. Each item consists of the count for that item, the name of that item and the total price for the item which you get by multiplying the count by the price of that particular item. For example, this is an order:

state.order = [
  {item: "chicken taco", count: 2, total: 4},
  {item: "carne asada taco", count: 3, total: 6},
  {item: "horchata", count: 2, total: 5},
  {item: "horchata", count: 1, total: 2.5},
  {item: "carne asada burrito", count: 2, total: 16},
  {item: "buche taco", count: 2, total: 5}
];

In the OrderCard component, I map through the order array to render the customer order. The count for each specific item is shown as an input. I want the user to be able to change the count for each individual item. For example, I want the user to be able to change the chicken taco count from 2 to 3. In order to do this, I would have to update redux state but only for the 0 index of state.order which concerns the chicken tacos. How would I go about doing this? I'm really at a loss.

Here is the code for the entire component:

const OrderCard = props => {
    const orderCount = props.order.reduce(function(prev, cur) {
        return prev + cur.count;
    }, 0);

    const countSelect = document.getElementById("count-select");

    const increaseCount = (count) => {
        count++;
    }

    return (
        <Card className="order-card-main">
            <i class="far fa-times-circle" style={{ position: 'relative', left: '0px', textAlign: 'left', width: '100%', marginTop: '3%', fontSize: '1.5rem' }} onClick={() => props.closeOrderCard()}></i>

            <h1 className="order-card-title">Your Order</h1>
            <p className="order-card-truck">from <span className="truck-name">{props.selectedTruck.name}</span></p>

            <div className="order-items-cont">
                {props.order.map(item => (
                    <div className="order-item-div">
                        <p className="order-item-count">
                            <input type="number" value={item.count} className="order-item-count-input" />
                        </p>
                        <p className="order-item-name">{item.item}</p>
                        <p className="order-item-total">{CurrencyFormatter.format(item.total, { currency: 'USD' })}</p>
                        <hr />
                    </div>
                ))}
            </div>

            <input className="order-note-input" type="text" placeholder="Note to truck..." />

            <button className="pay-button">
                <p className="total-items-count">{orderCount}</p>
                <p>Next step: pay</p>
                <p>{
                CurrencyFormatter.format(props.order.reduce(function(prev, cur) {
                    return prev + cur.total;
                }, 0), { currency: 'USD' })
                }</p>
            </button>
        </Card>
    )
}

const mapStateToProps = state => {
    return {
        selectedTruck: state.selectedTruck,
        order: state.order
    }
}

export default connect(mapStateToProps, { closeOrderCard })(OrderCard);

Here is a screenshot of the UI for the component:

Pure Function · Accepted Answer · 2020-05-05 01:15:16Z

1

If the order of the items is guaranteed you can simply update that individual item in redux by its index in the collection. You can do this a number of ways. You could also give each order line a unique ID to identify it.

Then you need to create a redux action that will update the quantity of a single line item in state.

You could dispatch this action in the onChange event of the number input for the line item. The action would need 2 arguments:

index of the line item or an id or something that uniquely identifies it.
the new quantity for that line item

Then in the reducer you simply find the item in the array and update the quantity of that item.

TLDR; if you want to mutate the state of a single item in the list, then dispatch an action with that information on it to the reducer, then the reducer will know how to update the state.

answered May 5, 2020 at 1:15

Pure Function

2,1571 gold badge23 silver badges31 bronze badges

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

1 Comment

Jevon Cochran Over a year ago

Yeah, this gave me a big aha moment. I realize that the problem is because I don't have a key for the each item in the array.

Collectives™ on Stack Overflow

updating Redux state based off of index in array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related