Grids generated using array constructor autofill on first change event

[CAYdenberg]

I'm not totally sure if this is a bug or just something improper with the way I'm going about this. I'm trying to auto-generate a 10-by-10 grid on init:

class Base extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      grid: Array(10).fill(Array(10).fill({})),
    }

    this._handleChange = this._handleChange.bind(this)
  }

  _handleChange(cell, colI, rowJ, value) {
    this.setState({
      grid: this.state.grid.map((col) =>
        col.map((rowCell) =>
          (rowCell === cell) ? ({value: value}) : rowCell
        )
      )
    })
  }

  render() {
    return (
      <DataSheet
        data={this.state.grid}
        valueRenderer={(cell) => cell.value}
        onChange={this._handleChange} />
    )
  }
}

export default Base

but when I do this, if I type anything into a cell, the entire grid gets filled with that value. After that it behaves as expected.

I can get any truthy or falsy value for that initial cell:

grid: Array(10).fill(Array(10).fill({value: null}))

grid: Array(10).fill(Array(10).fill({value: 0}))

grid: Array(10).fill(Array(10).fill({value: 1}))

all do the same thing.

[nadbm]

hey @CAYdenberg, your initialization is duplicating objects

var grid = Array(10).fill(Array(10).fill({value: null}));
console.log( grid[0] === grid[1] ) ) //true 
console.log( grid[0][0] === grid[1][0] ) ) //true

The way you're initializing essentially copies the same object. The handleChange method uses an object equality. Either change the method to use proper index or initialize your grid differently:

var grid = new Array(10).fill(null).map(v => Array(10));
grid = grid.map(row => row.fill(null).map(col => ({value: null}))); 
console.log( grid[0] === grid[1] ) ) //false 
console.log( grid[0][0] === grid[1][0] ) ) //false

[CAYdenberg]

Thanks for your response. That makes sense.