React JS maintain array inside state

Question

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 component constructor, I have

constructor(props) {
    super(props);

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

and then, I am trying to maintain it in componentDidUpdate

componentDidUpdate() {
    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!

why do you want to setState in componentDidUpdate method ?? and one more thing what do you mean by not working, r u trying to update the array ? — Mayank Shukla
– Mayank Shukla, Commented Mar 31, 2017 at 14:17
After rendering components, I have to change other state values. — h_h
– 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
– h_h, Commented Mar 31, 2017 at 16:03

Mayank Shukla · Accepted Answer · 2017-03-31 14:28:21Z

4

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});

answered Mar 31, 2017 at 14:19

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Comments

TRomesh · Accepted Answer · 2017-03-31 14:21:15Z

2

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.

answered Mar 31, 2017 at 14:21

TRomesh

4,4698 gold badges51 silver badges79 bronze badges

cn0047 · Accepted Answer · 2017-03-31 14:19:05Z

1

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

this.setState(newStateObject);

answered Mar 31, 2017 at 14:19

cn0047

17.2k7 gold badges61 silver badges75 bronze badges