NodeViewer Looping JSX (Need Help on this one)

[DevGareth]

For the NodeViewer I need to loop through and create the cards for the carousel/marquee. I can't because React sucks.

Any of you know how to do it?

I've tried a ton of different things at this point but nothing's worked.

thedata in render() of NodeViewer.js has the necessary data; the rest of render() can be changed as much as you want to try and make it work.

[DevGareth]

In more detail:

There is a function CarouselCard that returns the code for creating a card (a container with a photo's details). Inside nodeviewer is a function renderCard() that calls that.

You can run renderCard() repeatedly with no issues by copying and pasting it. However, I can't loop through them because render() doesn't allow regular loops inside of it.

So we need some way of looping through them, I think normally map is used somehow but I'm not sure.

[DevGareth]

Example of one apparent solution: https://flaviocopes.com/react-how-to-loop/

And another with objects: https://stackoverflow.com/questions/22876978/loop-inside-react-jsx

I've tried to implement that kind of thing can't do it though.

[rahul-kothari]

It breaks because you are missing the key attribute in div.

In render() line 70-90:

var cardList = [];

for (var i = 0; i < thedata.length; i++) {
    cardList.push(
        <div key={i} className="card">
            <CarouselCard timestamp = {thedata[i].state.timestamp} imgUri = {thedata[i].state.photoUri} emotion = {thedata[i].state.dominantEmotion} key={i}/>
        </div>
    )

  return cardList;
}

In React16 you should be able to return the array directly. refer 3rd most voted answer on https://stackoverflow.com/questions/32157286/rendering-react-components-from-array-of-objects

[DevGareth]

Think that works, data not working quite right so will need to fix that to check. Also, just so I remember, return should be outside of for.

[robertszafa]

You can also have a look at RecentPhotos and TagMenu where the parent also creates Photo and Tag respectively by looping through an array.

Both approaches need a key in the top level HTML/Component tag

[DevGareth]

Have implemented this solution to NodeViewer but it still doesn't work.

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {neutral}). If you meant to render a collection of children, use an array instead.

[DevGareth]

Solved. Was caused by dominant emotion being stored in key format.