I'm trying to map each array item to it's own div (to create a TicTacToe board). However, when I pass it in from props, it is recognized as an object. Here is an example:
Here is my App.js file:
class App extends Component {
state = {
gameBoard: Array(9),
}
render() {
console.log(this.state.gameBoard)
console.log(Array.isArray(this.state.gameBoard))
return (
<div className="App">
<Board squares={this.state.gameBoard}/>
</div>
);
}
}
export default App;
Here is my Board.js Component file:
function Board(squares) {
console.log(squares)
console.log(Array.isArray(squares))
return (
null
)
}
export default Board
The console logs in App.js work as expected yielding:
//(an array)
" (9) [empty × 9] "
"true"
However, the console logs in Board.js yield:
//(an object)
"{squares: Array(9)}"
"false"
I'm curious as to why this happens. Also, if there is a way, how can I get my component to recognize props as an array?