I have been using React state to maintain some data. For ints and strings it's working well, but unfortunately arrays are not working.

In my ponent constructor, I have

constructor(props) {
    super(props);

    this.state = {
        terms: 5,
        myArray: []
    }

and then, I am trying to maintain it in ponentDidUpdate

ponentDidUpdate() {
    this.state = {
        terms: this.state.terms,
        myArray: this.state.myArray
    }

but myArray: this.state.myArray is not working. However terms: this.state.terms is working perfectly.

Can someone help!

I have been using React state to maintain some data. For ints and strings it's working well, but unfortunately arrays are not working.

In my ponent constructor, I have

constructor(props) {
    super(props);

    this.state = {
        terms: 5,
        myArray: []
    }

and then, I am trying to maintain it in ponentDidUpdate

ponentDidUpdate() {
    this.state = {
        terms: this.state.terms,
        myArray: this.state.myArray
    }

but myArray: this.state.myArray is not working. However terms: this.state.terms is working perfectly.

Can someone help!

• javascript
• reactjs
• react-redux

• 1 why do you want to setState in ponentDidUpdate method ?? and one more thing what do you mean by not working, r u trying to update the array ? – Mayank Shukla Commented Mar 31, 2017 at 14:17
• and also you should use this.setState() to update state – dynamo Commented Mar 31, 2017 at 14:18
• After rendering ponents, I have to change other state values. – h_h Commented Mar 31, 2017 at 14:19
• @ Mayank Shukla Actually, I am re initialising state due to some reason, Anyhow never mind. I resolved my problem. But thank you for your timely reply. I really appreciate. – h_h Commented Mar 31, 2017 at 16:03

3 Answers 3

Issue is you are updating the state value in a wrong way, Update the state value like this:

this.setState({
     terms: this.state.terms,
     myArray : this.state.myArray
});

As per DOC:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Update the state array like this, first create a copy of that by using slice(), then do the change and use setState to update:

let arr = this.state.myarr.slice();
arr.push('data');
this.setState({arr});

You cannot set state directly like that since its an array you will have to append the value or else push the value.

try something like

var newArray = this.state.myArray.slice();    
newArray.push("new value");   
this.setState({myArray:newArray})

here i sliced to make it immutable.

You cannot use this.state with purpose to update state, you have to use:

this.setState(newStateObject);