Setting state with an array in React

Question

I'm trying to replace an initially empty array with an array made by a function using setState in React. I have in my constructor as follows:

this.state = {
    sources: []
};

This displays the correct array (I tested it with [0,1,2]). However, when I try to setState in a method like so:

this.setState({
    sources: [0,1,2]
})

it does not work and still displays the empty (or original) array. I understand you cannot mutate an array as state directly in React, but I don't think that's what I'm doing here. Here are some other things I have tried when researching this question, none of which have worked:

this.setState({
    sources: [...this.state.sources, 1]
})

...

this.setState({
    sources: this.state.sources.concat('test')
})

...

var temp = [0,1,2]
this.setState({
    sources: temp
})

Thanks in advance for any help!

EDIT Full code:

export class SrcMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            sources: [],
        };

        this.searchSources = this.searchSources.bind(this);
    }

    searchSources() {
    // commented out the actual method to replace with test code
        var temp=[0,1,2];
        console.log(temp); // [0,1,2] so I know the method works
        this.setState({
            sources: temp // etc for the other things i tried
        })
        console.log("this.state.sources: " + this.state.sources); // empty
    }

    render() {
        return(
        // etc...
          <button type="button" onClick={this.searchSources}>Test</button>
        );
    }
}

It should not be this.state({ sources: [] }; in the constructor, but this.state = { sources: [] }; — Tholle
– Tholle, Commented Jul 17, 2018 at 14:17
Could you post a snippet of the method you are calling the setState from — Sebastiaan van Arkens
– Sebastiaan van Arkens, Commented Jul 17, 2018 at 14:21
@Tholle thank you, that was a typo in my question, in the actual code file I have it written correctly — Leo T
– Leo T, Commented Jul 17, 2018 at 14:21
Alright. Could you include your entire component that has this behavior? It's hard to say what might be wrong from the code currently in your question. — Tholle
– Tholle, Commented Jul 17, 2018 at 14:22

Tholle · Accepted Answer · 2018-07-17 14:33:25Z

3

Your code is working, but you don't take into consideration that setState is asynchronous. If you log this.state in the callback that can be given as second argument to setState it will guarantee it has updated.

this.setState({ sources: temp }, () => {
  console.log(this.state.sources);
});

answered Jul 17, 2018 at 14:33

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

3 Comments

devserkan Over a year ago

We see the same question nearly everyday. Why does not people use render method to log the state? I hold myself from answering "Use the render method" instead of this callback one :)

Tholle Over a year ago

@devserkan I fell for this myself back when I started using React. I think it's better now, but it's not all that obvious from the documentation that it is asynchronous.

devserkan Over a year ago

Then, I'm the lucky one I guess :). Yes documentation is not so clear, I think I followed some good tutorials this is why I did not fell into this problem.

Lupine · Accepted Answer · 2018-07-17 14:29:49Z

-2

Here is an example that should work as you describe:

class ArrayTest extends React.Component {

  constructor() {
    super();
    this.state = {
      sources: [],
    };
  }

  public render() {

    return (
      <div>
      <div>test: {this.state.sources}</div>
      <button onClick={this._changeValue}>test</button>
       </div>
    );
  }

  private _changeValue = () => this.setState( {sources: [1,5] } );  
}

ReactDOM.render( 
  <ArrayTest />,
  document.getElementById('content')
);

answered Jul 17, 2018 at 14:29

Lupine

12 bronze badges

1 Comment

Rikin Over a year ago

Is there public or private in JS classes?

Collectives™ on Stack Overflow

Setting state with an array in React

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related