Let’s analyze what this error means:
Cannot read property ‘0’ of undefined
This means we’re doing something[0]
somewhere, and something
is undefined
. You’ve already identified the line where this is happening:
return <BoardSquare value={items[e]} onClick={() => onClick(e)} />
Here the something is items
. So where is items
coming from? Looks like the props of the component:
function Board({ onClick, items }) {
// ...
}
So what passes in the items
prop? Your MainGame
component:
<GameBoard onClick={() => handleClick} />
Ah ha! It’s not passing an items
prop. That means it will be undefined
.
CLICK HERE to find out more related problems solutions.