Passing associative array as props not working

Question

I have a React application which handles rooms and their statistics.

Previously, I had the code set up to pass as props to the next component:

the raw statistics (not a concern for the question)
an array of all the rooms set up as follows

I figured it would be simpler for me, though, to have the list of all rooms as an associative array where the keys of each element is the same as the ID it contains. To do that, I utilized a code similar to this in a for loop:

roomsList[rooms[v].ID] = rooms[v];

So that the result would be:

[a001: {...}, a002: {...}, ...]

I then proceeded to pass this style of array, and not the standard one with a numeric index, as a prop to the next component as such:

<StatsBreakdown stats={computedStats.current} roomsList={roomsList} />

BUT

Now, the next component sees that prop as an empty array.

Even more weirdly, if I initialize that roomsList array with a random value [0] and then do the same process, I end up with:

I cannot cycle through the array with .map, and, according to JS, the length is actually 0, it's not only Google Chrome.

Is there something I'm missing about the way JSX, JS or React work?

Could you paste in the code you used to convert your original roomlist please? — user2340824, Apr 19 '19 at 20:41
I think the confusion is that your roomsList is an object, not an array, so the array methods you're trying to use on it won't work. You could iterate over it using Object.keys instead of map. https://stackoverflow.com/questions/14810506/map-function-for-objects-instead-of-arrays — Daniel Beck, Apr 19 '19 at 20:42

Jibin Joseph · Accepted Answer · 2019-04-19T20:59:51.510

Your original roomsList was an array of objects, whose indices were 0,1,2 etc. roomsList[rooms[v].ID] = rooms[v]; implies you are inserting elements not using a number but an alphanumeric string. Hence your resulting array is no longer an array but an object.

So we can cycle over the object using Object.keys().

const renderRoomDets = Object.keys(roomsList).map(room => {
  roomOwner = roomsList[room].owner_id;
  return (
    <div>
      <p>{`Room Owner ${roomOwner}`}</p>
    </div>
  );
});

But I believe your original form is ideal, because you are reaping no special benefits from this notation.

A better alternative maybe using .find() or .findIndex() if you want iterate over an array based on a specific property.

const matchedRoom = roomsList.find(room => room.ID === 'Srf4323')

score 1 · Answer 2 · answered Apr 19 '19 at 21:17

Iterate the new array using its keys not indexes.

Or even better store your data in an actual object instead of an array since you're using strings for ids.

First define your object like so:

let data = {};

Then start adding records to it. I'd suggest deleting the ID attribute of the object since you're storing it in the key of your record, it's redundant, and it won't go anywhere unless u delete the entry.

data[ID] = row;

To delete the ID attribute (optional):

row.ID = null;
delete row.ID;

Then iterate through it using

for(let key in data){}

Passing associative array as props not working

2 Answers2