3

I'm new to React, and I just can't figure out how to push new elements inside an array defined into state, using the spread operator. The purpose is to obtain an array containing a sequence of different numbers, the code is the following:

getSequence = () => {
    let n = 0;

    while ( n < 3 ) {
      let number = Math.floor(Math.random() * 10) + 1;
      let exists = this.state.sequence.indexOf(number);

      if ( exists < 0 ) {
        this.setState({
          sequence: [...this.state.sequence, number]
        });

        n++;
      }
    }
  }

The event is triggered by onClick event, but on each click the array will be updated with only one number. Where am I wrong?

Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153

1 Answers1

3

Changes:

1- setState is async, so it will not work as you are expecting. As per DOC:

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

2- Using setState in loop is not a good idea, create the array of three numbers first then simply merge that into state array.

3- If new state value is dependent on previous state then use updater function instead of this.state inside setState.

Check this answer: Why calling setState method doesn't mutate the state immediately?

Write it like this:

getSequence = () => {
    let n = 0, arr = [];

    while ( n < 3 ) {
        let number = Math.floor(Math.random() * 10) + 1;
        let exists = this.state.sequence.indexOf(number);

        if ( exists < 0 ) {
            arr.push(number);
            n++;
        }
    }

    this.setState(prevState => ({
        sequence: [...prevState.sequence, ...arr]
    }));
}
Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142