React Hook doesn't re-render array.map after state change-CodePudding

Today I'm trying to render some reactHooks by iterating through arrays.

The issue I'm encountering now is the re-render that doesn't take place on a tileMap state update.

tileMap is an array of array of object (cf. end of post)

The state changes, I can log it with right values but still no render of the Tile components

function resetGame() {
        console.log("yo");
        
        let tileMap = []
        
        //tileMap is updated here

        //This is always reached
        setTileMap(tileMap)
    }

<div className="life2dgame-root">      
   {
      
      tileMap ? 
        tileMap.map((row) => {
           row.map((tile) => {
              console.log(tile);
                 return <Tile isLife={tile.isAlive}/>
              })
            })
        :
        null
   }
</div>

Type of the tileMap state

<{
    loc: {height: number, width: number},
    element: JSX.Element,
    isAlive: boolean
}[][]>

CodePudding user response：

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}/>
  })
})

CodePudding user response：

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.