CODEWITHSUNDEEP
javascriptreactjsjsx
Q.uestion
Q.uestion

Reputation: 253

Render array of objects to list in JSX

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?

Upvotes: 3

Views: 2967

Answers (2)

Blue
Blue

Reputation: 22911

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

Upvotes: 6

Lukasz
Lukasz

Reputation: 1842

Have you tried this?

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

Upvotes: 0

Related Questions