Update ReactJS state array

Question

I have a ReactJS component that renders a list of orders. I get orders from a REST API. The format of the data is the following:

{
    "count": 2,
    "orders": [
        {
            "order_number": 55981,
            "customer_number": 24742
        },
        {
            "order_number": 55980,
            "customer_number": 24055
        }
    ]
}

Each order can have a list of items. When I click on an order, I get the list of items in the following format:

{
    "count": 2,
    "items": [
        {
            "name": "Green pillow",
            "status": "pending"
        },
        {
            "name": "Red pillow",
            "status": "delivered"
        }
    ]
}

The orders list is refreshed automatically and can change any time, so I store the orders list in this.state which gets updated via ajax. this.state looks like this:

{
    "orders": [
        {
            "order_number": 55981,
            "customer_number": 24742
        },
        {
            "order_number": 55980,
            "customer_number": 24055
        }
    ]
}

My problem is that I would like that, when I click on an order, the state gets updated so that the clicked order contains the items associated to that order. The order list would look like this after clicking on an item:

{
    "count": 2,
    "orders": [
        {
            "order_number": 55981,
            "customer_number": 24742,
            "items": [
                {
                    "name": "Green pillow",
                    "status": "pending"
                }
            ]
        },
        {
            "order_number": 55980,
            "customer_number": 24055
        }
    ]
}

How can I add items to a specific order using this.setState()? The problem is that setState seem to update data using keys, but my orders are in an array. I can probably copy the whole array and put the items key inside, but that seems overkill. Am I taking the wrong approach?

domokun · Accepted Answer · 2015-10-14 18:26:28Z

1

I'm not entirely sure I got your question, but I think that what you're trying to achieve is add new orders to an array (push) which is located in your state.

If that's the case, you should something like this:

// since you're orders it's not a plain array, you will have
// to deep clone it (e.g. with lodash)

let orders = _.clone(this.state.orders);
orders.push(newOrder);
this.setState(orders);

Why cloning the state before changing it is important?

Immutability comes with some great properties (like easy equality comparison) and the React team is aiming towards that direction to improve performance more and more.

As of React 0.13 mutating state without calling this.setState will trigger a warning, and it will break entirely at some point in React's future (see the docs)

Hope this helps

answered Oct 14, 2015 at 18:26

domokun

3,0034 gold badges32 silver badges56 bronze badges

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

Comments

Blair Anderson · Accepted Answer · 2016-01-01 03:25:35Z

1

Make a copy of the current state, modify the copy and use it as the new state.

This is just a simple example. You might want to add some caching logic so you don't have to retrieve the order's item again and again when a user click on the same order multiple times.

var updatedOrder = _.clone(this.state.orders);

updatedOrder[0]["items"] = [ { "name": "Foo", "status":"bar" } ];

this.setState({
  orders: updatedOrder
});

edited Jan 1, 2016 at 3:25

Blair Anderson

20.3k9 gold badges82 silver badges119 bronze badges

answered Oct 14, 2015 at 19:21

Jason

8486 silver badges17 bronze badges

1 Comment

Blair Anderson Over a year ago

This answer is more close to what the OP asked but you need to clone this.state.orders instead of a direct pointer. you're setting the state with the same object after it has been mutated and this will have side effects.

Collectives™ on Stack Overflow

Update ReactJS state array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related