cannot read property of -1 in ReactJS multidimensional grid - reactjs

Question

I'm at my witsend with this problem. I'm building Conway's game of life and right now I'm trying to find neighbors(cells that are on top, to the bottom, and on the sides of the target cell). When I console log my function (basically to find the neighbors), I get values for the bottom and middle rows and all columns but for the top row I get "Cannot read property '-1' of undefined". Sometimes it will return "cannot read property of 'r' of defined" as well. I'm confused because I get return values when i console log both row (r) and columns (c). I'm also curious as to why I don't see this same error message when dealing with my columns. The messages on developer tools are very cryptic. I've spent quite a bit of time trying to figure this out but I'm truly stuck. Any help would be much appreciated.
I tried to do a JSbins: https://jsbin.com/bapazem/edit?html,css,js,output but its not liking the construction of my react components. You can see these areas clearly on my codepen: http://codepen.io/tbraden30/pen/AXgVNQ. Just click the play button and dev tools
Thanks in advance for your help
function randomGrid() {
var gridHeight = 20,
gridWidth = 20,
gridContainer = [];
for (var r = 0; r < gridWidth; r++) {
var row = [];
for (var c = 0; c < gridHeight; c++) {
row.push({
alive: Math.random() < 0.2,
neighbors: 0,
r: r,
c: c,
coords: [r, c]
});
}
gridContainer.push(row)
}
return gridContainer;
}
function isWithinBounds(cell) {
if (cell.r >= 0 && cell.r < 20 && cell.c >= 0 && cell.c < 20) {
return true
}
}
var grid = randomGrid();
var Board = React.createClass({
getInitialState: function() {
return {
cellLocation: randomGrid()
};
},
updateCells: function(r, c) {
var grid = this.state.cellLocation;
for (var r = 0; r < 20; r++) {
for (var c = 0; c < 20; c++) {
var cell = grid[r][c];
//console.log('cell', cell)
cell.neighbors = 0;
var isAlive = cell.alive;
var bottomLeft = grid[r + 1][c - 1],
bottomMiddle = grid[r + 1][c],
bottomRight = grid[r + 1][c + 1],
middleLeft = grid[r][c - 1],
middleRight = grid[r][c + 1],
topLeft = grid[r - 1][c - 1], **//problematic**
topMiddle = grid[r - 1][c], **//problematic**
topRight = grid[r - 1][c + 1];**//problematic**
/* if (isWithinBounds(bottomLeft) && isAlive) {
cell.neighbors++;
}
if (isWithinBounds(bottomMiddle) && isAlive) {
cell.neighbors++;
}
if (isWithinBounds(bottomRight) && isAlive) {
cell.neighbors++;
}
if (isWithinBounds(middleLeft) && isAlive) {
cell.neighbors++;
}
if (isWithinBounds(middleRight) && isAlive) {
cell.neighbors++;
}
if (isWithinBounds(topLeft) && isAlive) {
cell.neighbors++;
}
if (isWithinBounds(topMiddle) && isAlive) {
cell.neighbors++;
}
if (isWithinBounds(topRight) && isAlive) {
cell.neighbors++;
}*/
console.log('TR', topRight)
}
}
return cell;
},
render: function() {
return (
<div className='container grid_body'>
<CellMatrix grid={this.state.cellLocation}/>
<button type='button' onClick={this.updateCells} className='play'>Play</button>
</div>
)
}
}, this)
var CellMatrix = React.createClass({ //cells conglomerated into a grid
render: function() {
var fillCells = [],
grid = this.props.grid,
grid = grid.reduce((a, b) => a.concat(b)) //flattens the array.
grid.map(function(cellObject, index) {
fillCells.push(<Cell alive={cellObject.alive} r={cellObject.r} c={cellObject.c} coords={cellObject.coords} index={index} neighbors={this.updateCells}/>)
// console.log('fillcells', fillCells)
}, this)
return (
<div>
{fillCells}
</div>
)
}
})
var Cell = React.createClass({ //individual cell
render: function() {
return (
<td className={this.props.alive}
index={this.props.index}
coords={this.props.coords}
r={this.props.r}
c={this.props.neighbors}
neighbors={this.props.neighbors}
>
{this.props.children}
</td>
)
}
})
ReactDOM.render(<Board/>, document.getElementById('content'))

Answer 1

it sounds like an off by 1 error. when you generate the grid, you go from index 0..19, yet in the updateCells function you have a loop that sets c = 0, then subtracting 1 from it, meaning youre trying to access grid[-1][-1] when r and/or c is 0 (probably not what youre trying to do). then the fatal error likely occurs when r is 19 and c is 0, and you add one to r and subtract 1 from c. you end up accessing grid[20][-1] and since grid[20] is undefined, you get the error Cannot read property '-1' of undefined