Why does the handleClick method in my component seem to loop? - reactjs

Question

I am setting out to learn some react, and I am trying to create a grid of clickable buttons. For now all I want is to change the color of the button once it is clicked.
Starting off from this React Tutorial, I wrote my components to create a variable size grid through loops.
I added a handleClick method to my Grid component to change the color of the button clicked. When I click a button though, the entire column changes colour.
From the debugger it seems to pass the correct values of the indeces (i and j) to the handleClick method, so I am at a loss as to why this is happening.
The code for my components is the following:
var height = 3;
var width = 5;
class Cell extends React.Component {
render() {
return (
<button
className={ this.props.value === 'ON' ? "cell cellOn" : "cell
cellOff" }
onClick={() => this.props.onClick()}>
</button>
);
}
}
export class Grid extends Component {
constructor(props) {
super(props);
this.state = {
cells: Array(height).fill(Array(width).fill(null)),
};
}
handleClick(i, j) {
const cells = this.state.cells.slice();
cells[i][j] = ( cells[i][j] === 'ON' ) ? 'OFF' : 'ON' ;
this.setState({cells: cells});
}
renderCell(i, j) {
return(
<Cell value={this.state.cells[i][j]}
onClick={() => this.handleClick(i, j)} />
);
}
renderCellRow(i, w) {
return(
<div>
{Array.from(Array(w), (_,x) => x).map((j) => this.renderCell(i, j)) }
</div>
);
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div>
{Array.from(Array(height), (_,x) => x).map((i) => this.renderCellRow(i, width)) }
</div>
</div>
);
}
}
Could somebody offer some suggestions? Is it because of the map calls that I used to loop on height and width?
Thanks in advance!

Answer 1

The problem is in the way of your state initialization:
Array(height).fill(Array(width).fill(null))
I'll suggest to avoid using fill. It fills the array with objects by reference. So when you change one of them you get updates into the other ones.
Here is a codepen with the working version https://codepen.io/krasimir/pen/YYdLQL?editors=0010