Set object values of state using setState method

Question

I have an object as a state variable in React. I want to change its various value using the setState method but it shows. Although I am able to set it using this.state method but this is not the right way I guess.

How can I do this?


 this.state={
            graphData:{
                labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
                datasets:[
                    {
                    label:"Day",
                    backgroundColor:"#F6ABE4",
                    borderColor:'#333',
                    borderWidth:2,
                    lineTension:0.1,
                    fill:true,
                    data:[4,5,6,7,8,9,10,11,12,1,2,3,4]
            
                    }
            
            
                ]
            }
}

 this.setState({[graphData.datasets[0].backgroundColor]:"#F6ABE4"})


this.setState((state) => ({
                    graphData : {
                        ...state.graphData ,
                        datasets : [
                
                            // First slice of array before the index we want to change
                            ...state.graphData.datasets.slice(0, 5),
                
                            // changing the element on the given index
                            {
                                ...state.graphData.datasets[0] ,
                                // you can modify all the properties you want
                                data : result // <------ CHANGE HERE
                            },
                
                            // rest of the array elements after index
                            ...state.graphData.datasets.slice(6+1)
                        ]
                    }
                }))

You can use something like https://github.com/immerjs/immer what will make this easy for you. — Harish, May 21 '20 at 06:22

Vivek Doshi · Accepted Answer · 2020-05-20T14:39:14.523

1

Here you go, you can do something like this :

this.setState((state) => ({
    graphData : {
        ...state.graphData ,
        datasets : [

            // First slice of array before the index we want to change
            ...state.graphData.datasets.slice(0, index),

            // changing the element on the given index
            {
                ...state.graphData.datasets[index] ,
                // you can modify all the properties you want
                backgroundColor : "#F6ABE4" // <------ CHANGE HERE
            },

            // rest of the array elements after index
            ...state.graphData.datasets.slice(index+1)
        ]
    }
}))

Hope the code comments will clear the doubts

edited May 20 '20 at 14:39

answered May 20 '20 at 14:26

Vivek Doshi

56,649
12
110
122

For changing data inside the datasets, i update the code this way. But it didn't work. – Pranay kumar May 21 '20 at 05:36
Can you suggest, what is the value of index for updating 'data' array inside datasets? I try with '5'. – Pranay kumar May 21 '20 at 05:38
@Pranaykumar, yes so it will update `backgroundColor : "#F6ABE4"` of `datasets[5]` , as you updated question it should be `(5+1)` not `(6+1)`, and you should take index var like `var index = 5` and only update there – Vivek Doshi May 21 '20 at 05:53

score 0 · Answer 2 · answered May 21 '20 at 07:52

0

You can also try this:

const { graphData } = this.state;
graphData.datasets[0].backgroundColor = "#F6ABE4";
this.setState({ 
   graphData
})

answered May 21 '20 at 07:52

Vicky

592
4
5

Set object values of state using setState method

2 Answers2