Render array of objects to list in JSX

Question

I try to convert an array of objects into a list. For now, I just want to convert a "type" property of my object into a list item, but it doesn't work.

Here is my code:

constructor(props){
    super(props);
    this.travelRawdata = [{type:15}];
}
render(){
    return(
        <ul>
           {this.travelRawdata.forEach(element => <li>{element.type}</li>)}
        </ul>
);}

I don't get any output. If I use console.log(element.type) it works fine, so I think there is something wrong with my HTML tags?

Blue · Accepted Answer · 2018-10-08 19:38:32Z

6

forEach() will always return undefined. You want to use .map() instead, to convert your data into an array of react elements:

constructor(props){
    super(props);
    this.travelRawdata = [{type:15}];
}
render(){
    return (
        <ul>
           {this.travelRawdata.map(element => <li>{element.type}</li>)}
    </ul>
    );
}

Note: Be sure to read up here on lists and keys. Not including a key for the element, results in rerenders for every single element every time the array is updated.

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

edited Oct 8, 2018 at 19:38

answered Oct 8, 2018 at 19:34

Blue

23k7 gold badges69 silver badges102 bronze badges

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

Comments

Lukasz · Accepted Answer · 2018-10-08 19:34:49Z

0

Have you tried this?

this.travelRawdata.map((item)=> { return (<li>{item.type}</li> })

answered Oct 8, 2018 at 19:34

Lukasz

1,84010 silver badges13 bronze badges

Collectives™ on Stack Overflow

Render array of objects to list in JSX

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related