javascript - Render array of objects to list in JSX - Stack Overflow

admin管理员组

文章数量:1023764

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?

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?

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Oct 8, 2018 at 19:33 Q.uestionQ.uestion 25322 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

Have you tried this?

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

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?

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?

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Oct 8, 2018 at 19:33 Q.uestionQ.uestion 25322 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

Have you tried this?

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

本文标签： javascriptRender array of objects to list in JSXStack Overflow