React Hook doesn't re-render array.map after state change
Solution 1:
You're not returning anything from tileMap.map
. Add a return and you should see something.
tileMap.map((row) => {
return row.map((tile) => {
return <Tile isLife={tile.isAlive}/>
})
})
Solution 2:
React uses key to decide which elements to rerender; because you don't have set keys in your map function, React won't update anything. Try:
tileMap ?
tileMap.map((row, index) => {
row.map((tile) => {
console.log(tile);
return <Tile key={`${row + index}} isLife={tile.isAlive}/>
})
})
:
null
Edit:
You can put whatever you want in the key, I don't know the value of your row
variable so I joined it with the index, but you can put anything as long as it stays unique.