Como renderizar uma matriz de objects no React?

você poderia por favor me dizer como fazer o render list in react js. Eu gosto disso

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

      Você pode fazer isso de duas maneiras:

      Primeiro:

       render() { const data =[{"name":"test1"},{"name":"test2"}]; const listItems = data.map((d) => 
    • {d.name}
    • ); return (
      {listItems }
      ); }

      Segundo: Escreva diretamente a function do mapa no retorno

       render() { const data =[{"name":"test1"},{"name":"test2"}]; return ( 
      {data.map(function(d, idx){ return (
    • {d.name}
    • ) })}
      ); }

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

      Você pode transmitir qualquer expressão JavaScript como filha, colocando-a dentro de {}. Por exemplo, essas expressões são equivalentes:

       foo {'foo'} 

      Isso geralmente é útil para renderizar uma lista de expressões JSX de tamanho arbitrário. Por exemplo, isso renderiza uma lista HTML:

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

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