Creating a JSX list in React with an object

Question

So, I know when creating lists of data in React, you usually use the map function. But, since that works only for arrays, and I have an object, I'm not sure how to go about this.

So, I have the following object

[Object, Object, Object]
0:Object
1:Object
2:Object
length:3
__proto__:Array[0]

I'm trying to render the image from the url contained within each of these objects, and here is how I am trying to do it.

import React from 'react';

const EvolutionChainComponent = ({data}) => {
    console.log(data);
    for(let key in data){
        console.log(data[key]);
        return(
            <div>
                <img src={data[key].sprites.front_default} role='presentation'/>
            </div>
        )
    }
}

export default EvolutionChainComponent;

The problem is that since I am using a for in loop, once I return the div, the code breaks out of the loop. I'm sure there is a simple way to do this by iterating over an object, but I'm not quite sure what that is since I've only ever seen React data iteration used with the map function on an array.

It seems like you are looking over the array of object and then accessing its keys, rather than looping over the keys in a single object since you are accessing value like data[key].sprites.front_default. In this case map is the way to go. I don't think you require Object.keys() to loop — Shubham Khatri
– Shubham Khatri, Commented Nov 3, 2016 at 17:23
@ShubhamKhatri - Yeah, you are right. I completely missed that it was an array because when I console.log typeof data, it returned an object. And I forgot that an array is also a type of object. — redixhumayun
– redixhumayun, Commented Nov 3, 2016 at 17:36

Shubham Khatri · Accepted Answer · 2016-11-03 17:47:35Z

1

No need to iterate over the object, You need to use the simple map method to loop over the array of objects

import React from 'react';

const EvolutionChainComponent = ({data}) => {
    console.log(data);
    data.map(function(item){
       return(
            <div>
                <img src={item.sprites.front_default} role='presentation'/>
            </div>
        )
    })

}

export default EvolutionChainComponent;

answered Nov 3, 2016 at 17:47

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kousha · Accepted Answer · 2016-11-03 16:55:08Z

1

You can use Object.keys to map over the keys and return an array of elements instead of just 1 element:

import React from 'react';

const EvolutionChainComponent = ({data}) => {
   return Object.keys(data).map((key, index) => (
       <div key={index}>
           <img src={data[key].sprites.front_default} role='presentation'/>
       </div>
   ));
}

export default EvolutionChainComponent;

edited Nov 3, 2016 at 16:55

Kousha

36.7k60 gold badges191 silver badges319 bronze badges

answered Nov 3, 2016 at 16:50

Ivan

10.4k12 gold badges49 silver badges79 bronze badges

2 Comments

redixhumayun Over a year ago

Hey, when I try to run this I get the following error invariant.js:38 Uncaught (in promise) Error: EvolutionChainComponent(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.(…)

redixhumayun Over a year ago

I'm sorry for wasting your time with this answer. I just needed to use regular old array.prototype.map

Collectives™ on Stack Overflow

Creating a JSX list in React with an object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related