¿Cómo renderizar una serie de objetos en React?

¿Podría decirme cómo representar una lista en reaccionar js? me gusta esto

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>
    );
  }
}

Dec 29 '16 13:12 user944513

Puedes hacerlo de dos maneras:

Primero:

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

    return (
      <div>
      {listItems }
      </div>
    );
  }

Segundo: escriba directamente la función del mapa en la devolución

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

Dec 29 '2016 07:12 Shubham Khatri

https://facebook.github.io/react/docs/jsx-in- Depth.html#javascript-expressions

Puede pasar cualquier expresión de JavaScript como hija, encerrándola dentro de {}. Por ejemplo, estas expresiones son equivalentes:
<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>
Esto suele resultar útil para representar una lista de expresiones JSX de longitud arbitraria. Por ejemplo, esto representa una lista HTML:
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>

Expandir fragmento

Dec 29 '2016 07:12 dting