How to setState for nested objects

Question

I'm working with chartjs and trying to update my initial state with an API call which looks like:

this.state = {
      data: {
        labels: [], //<-- SET THIS STATE
        datasets: [{
            fill: 'false',
            lineTension: 0,
            label: 'Price in USD',
            data: [], //<-- SET THIS STATE
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }
}

I need to setState for labels - which I have done already. But got lost and confused as to also setState for code below at the same time.

data: {
        labels: [],
        datasets: [{
            fill: 'false',
            lineTension: 0,
            label: 'Price in USD',
            data: [], <------THISSSS

Here's what I did to set my labels state

let labels = this.state.data.labels
          labels = timeData
          this.setState(({data}) => ({data: {
            ...data,
            labels: labels
          }}))

Shea · Accepted Answer · 2018-07-01 19:22:28Z

1

You are initializing labels as this.state.data.labels, which is fine, but then you change it to timeData, which I'm assuming is declared somewhere else in the code. You don't need to set labels to this.state.data.labels if you're going to assign it a new value immediately after. Also, if you want to simplify it further, you can also exclude the line labels = timeData and just use timeData in the setState call.

As for the this.setState() call, you should not be passing it a function.

To answer your question, this is how you can set the state of labels and the second data property without affecting the rest of the state:

this.setState({
    data: {
        labels: timeData,
        datasets: [{
            ...this.state.data.datasets,
            data: SOME_VALUE_HERE
        }]
    }
});

answered Jul 1, 2018 at 19:22

Shea

3085 silver badges15 bronze badges

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

2 Comments

Binny.H Over a year ago

Actually it seems like setState is not carrying over unchanged values from initial State. for example the label, background colour, etc is not set in state after.

Shea Over a year ago

I just tested it and it worked for me. Please create a jsfiddle with your code and I will help troubleshoot.

Collectives™ on Stack Overflow

How to setState for nested objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related