How to update state of 2D array with N objects inside in React?

Question

Before I jump on subject, I want to mention that I've already referred to questions like these, but could not figure the solution on my own.

Updating React state as a 2d array?

Let's assume this is my state object

state = {
    graphData: [
        [{x: 0, y: 0}],
    ],
};

As time increases, graphData will get bigger and might look something like this

    graphData: [
        [{x: 0, y: 0}, {x: 1, y:1}, {x:2, y:2}],
    ],

At the moment, I handle that in this manner:

  nextGraphData = this.state.graphData[0][graphDataLength] = {x: lastXAxisValue + 1, y: value};

    this.setState({
        graphData: {
            ...this.state.graphData,
            nextGraphData
        }
    });

Obviously, I get an error saying I should not mutate state directly. So, how to achieve the same without direct mutation. I tried to play around a bit, but could not figure it out.

akhtarvahid · Accepted Answer · 2020-01-10 09:44:03Z

1

Try this

state = {
    graphData: [
        [{x: 0, y: 0}],
    ],
};

use like this

this.setState({
  ...this.state,
  graphData: [...this.state.graphData, {x:1,y:1}]
})

answered Jan 10, 2020 at 9:44

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

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

Comments

ROOT · Accepted Answer · 2020-01-10 09:59:32Z

1

The error appears because of this line

nextGraphData = this.state.graphData[0][graphDataLength] = {x: lastXAxisValue + 1, y: value};

as you are trying to assign value directly to the state.graphData

what you have to do is to change it like this:

let nextGraphData = {...this.state.graphData,{x: lastXAxisValue + 1, y: value}};

this.setState({
    graphData: {
        ...nextGraphData
    }
});

answered Jan 10, 2020 at 9:59

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to update state of 2D array with N objects inside in React?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related