How to render an array of objects in React?

Question

Could you tell me how to visualize a list in js reaction. I like it

https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview

class First extends React.Component { constructor (props){ super(props); } render() { const data =[{"name":"test1"},{"name":"test2"}]; const listItems = data.map((d) => <li key={d.name}>{d.name}</li>; return ( <div> hello </div> ); } } 

Answer 1

You can do this in two ways:

First

 render() { const data =[{"name":"test1"},{"name":"test2"}]; const listItems = data.map((d) => <li key={d.name}>{d.name}</li>); return ( <div> {listItems } </div> ); } 

Secondly: Directly write the display function in reverse

  render() { const data =[{"name":"test1"},{"name":"test2"}]; return ( <div> {data.map(function(d, idx){ return (<li key={idx}>{d.name}</li>) })} </div> ); } 

Answer 2

https://facebook.imtqy.com/react/docs/jsx-in-depth.html#javascript-expressions

You can pass any JavaScript expression as child elements by enclosing it in {}. For example, these expressions are equivalent:

 <MyComponent>foo</MyComponent> <MyComponent>{'foo'}</MyComponent> 

This is often useful for displaying a list of JSX expressions of arbitrary length. For example, this displays an HTML list:

 function Item(props) { return <li>{props.message}</li>; } function TodoList() { const todos = ['finish doc', 'submit pr', 'nag dan to review']; return ( <ul> {todos.map((message) => <Item key={message} message={message} />)} </ul> ); } 

---

 class First extends React.Component { constructor(props) { super(props); this.state = { data: [{name: 'bob'}, {name: 'chris'}], }; } render() { return ( <ul> {this.state.data.map(d => <li key={d.name}>{d.name}</li>)} </ul> ); } } ReactDOM.render( <First />, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>