Problem with Object.keys.map in React

1

Hello !

I have a problem when I try to render something in React with Object.keys(Object).map.
I have an object, games_list, which looks like this :

games_list: {
  game1 : {
   name: "something",
   id: "something"
  },
  game2 : {
    etc
  }
}

In my page, I’m trying to have cards with informations for each games on it (I’m using React Hooks in functional components) :

return (
  <div>
      <h3>Your Games </h3>
        {Object.keys(games_list).map((game, i) => (
           <div key={i}>
              <p>{games_list[game].name}</p>
              <p>{games_list[game].id}</p>
           </div>
          ))}
  </div>
)

(not exactly my code but just so you see what I mean (and I tried something simple like that and it did the same thing))
And it just goes crazy :
ezgif-4-ed350b7f2d51

Does anyone know what I’m doing wrong ? Everywhere I look, the way I do it is the recommended way and still, it’s not working properly.

Thank you.

2

Welcome, Yveri.

Did you mean this line:

games_list: {

to be:

const games_list = {

Also, why not change it to an array:

const games_list = [

That way, you can map over it without the need to make it into an array. Or, if you have no control of the shape, preprocess the object, as you have done, into an array, before using it in your component.

Hope this helps

3

Hi, thank you for your response.

I was just showing the way my data is structured in my database, it’s not hardcoded, I get it from my Context who pulls it from my database.

Also, sadly I can’t make games_list into an array. That’s what I did first but I’m using Cloud Firestore for my database and if I want to modify something, like for example hoursPlayed for game1, I have to rewrite all of game1 everytime. games_list being an Object makes everything simpler.

Just to be more precise : the data is good and I can access it. For example, if I do :

    Object.keys(game_list).map((game) => {
      console.log(game_list[game1].name)
      console.log(game_list[game2].name)
    })

it works, I get what I’m looking for. If I only have one game to render in my page, it also works perfectly. But if I have two or more games, it seems to be rerendering and looping forever, as you can see in the gif in the OP.

4

I think we need to see more of the code to help. Not sure why it would re-render if the data isn’t changing. Can you try giving the div a unique key instead of using the index.