React: setting array object in setState

Question

I am trying to reset an array using the setState method in React. In the constructor I have set tile_arrays to null initially.

The first console.log() produces the desired array of N Tile objects after the nested for loops finish. When setState is called and the subsuquent console.log() after, the state is still null and was not updated.

I am not trying to append new information to the states array, but replace it entirely.

createTileArray(){
        let new_array= [];
        let size = this.state.size;
        for(let row = 0; row < size; row++){
            
            for(let column = 0; column < size; column++){
                
                if(row === 0 || row === 1){
                    //Player 1
                    new_array.push(new Tile(column, row, true, 1))
                }
                else if(row === size - 1 || row === size - 2){
                    //Player 2
                    new_array.push(new Tile(column, row, true, 2))
                }
                else{
                    //Empty Tile
                    new_array.push(new Tile(column, row, false, 0))
                }

            }
        }
        console.log("Tile to be set into the state", new_array)
        this.setState({
            tile_arrays:new_array
            
        },
        () => console.log("Updated Tiles: ", this.state.tile_arrays))
    }

this.setState is asynchronous, you can't log it after setting it. Try logging it in render. — HMR
– HMR, Commented Jul 1, 2020 at 18:01
I fixed the console.log() but the state is still not being updated with the new array, any thoughts? — Ryan
– Ryan, Commented Jul 1, 2020 at 18:30
So the first console.log is not matching the second console.log? You can edit your question and add a new section below the current information to represent your current code-state. — Chris
– Chris, Commented Jul 1, 2020 at 18:35
Ok I made an edit on the code to be a little more readable and implemented the new console.log change. To be a little clearer, the first console.log is meant to showcase that it has an array of Tile object(which it does log correctly). The second console.log is meant to showcase the state now has the new updated array instead of its initialized null state. After a closer look it doesn't even look like that second console.log is outputting anything. — Ryan
– Ryan, Commented Jul 1, 2020 at 18:48

Chris · Accepted Answer · 2020-07-01 18:04:22Z

1

setState is asynchronous, but it does allow a callback.

 this.setState(
   { tile_arrays: tile_array },
   () => console.log("Updated Tiles: ", this.state.tile_arrays)
 )

answered Jul 1, 2020 at 18:04

Chris

2,8261 gold badge31 silver badges36 bronze badges

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

1 Comment

Ryan Over a year ago

So it doesnt set the tile_arrays properly and I'm not sure why

HMR · Accepted Answer · 2020-07-01 19:06:50Z

Copied and pasted your code in a snippet to demonstrate the comment I made one hour ago.

Try logging it in render

class Tile {
  constructor(column, row, something, player) {
    this.column = column;
    this.row = row;
    this.something = something;
    this.player = player;
  }
}
class App extends React.Component {
  state = {
    size: 3,
  };
  createTileArray() {
    let new_array = [];
    let size = this.state.size;
    for (let row = 0; row < size; row++) {
      for (let column = 0; column < size; column++) {
        if (row === 0 || row === 1) {
          //Player 1
          new_array.push(new Tile(column, row, true, 1));
        } else if (row === size - 1 || row === size - 2) {
          //Player 2
          new_array.push(new Tile(column, row, true, 2));
        } else {
          //Empty Tile
          new_array.push(new Tile(column, row, false, 0));
        }
      }
    }
    console.log('Tile to be set into the state', new_array);
    this.setState({
      tile_arrays: new_array,
    });
  }
  componentDidMount() {
    this.createTileArray();
  }
  render() {
    //was that so difficult?
    console.log('tile arrays', this.state.tile_arrays);
    return (
      <pre>{JSON.stringify(this.state, undefined, 2)}</pre>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Ryan · Accepted Answer · 2020-07-01 19:02:36Z

0

After a little testing, I have found a solution. In my initial constructor for the component, instead of setting

tile_arrays:null

I set it to equal an empty array

tile_arrays:[]

The problem seems to be fixed and working now.

answered Jul 1, 2020 at 19:02

Ryan

11 bronze badge

Collectives™ on Stack Overflow

React: setting array object in setState

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related