Como renderizar un array de objetos en React?

Presta atención porque en este escrito vas a hallar la solución que buscas.

Solución:

Puedes hacerlo de dos formas:

Primero:

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

    return (
      

      listItems 
      
    );
  

Segundo: Escriba directamente la función de mapa en el 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-expresiones

Puede pasar cualquier expresión de JavaScript como elementos secundarios, encerrándola dentro de . Por ejemplo, estas expresiones son equivalentes:

foo

'foo'

Esto suele ser útil para representar una lista de expresiones JSX de longitud arbitraria. Por ejemplo, esto representa una 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')
);
  

La respuesta de Shubham explica muy bien. Esta respuesta se suma a ella para evitar algunas trampas y refactorizar a una sintaxis más legible

Trampa : Hay un concepto erróneo común en la representación array de objetos, especialmente si se realiza una acción de actualización o eliminación en los datos. El caso de uso sería como eliminar un elemento de la fila de la tabla. A veces, cuando la fila que se espera que se elimine, no se elimina y, en cambio, se elimina otra fila.

Para evitar esto, usa key prop en el elemento raíz que se repite en el árbol JSX de .map(). También agregando React’s Fragment evitará agregar otro elemento en medio de ul y li cuando se procesa a través del método de llamada.

state = 
    userData: [
         id: '1', name: 'Joe', user_type: 'Developer' ,
         id: '2', name: 'Hill', user_type: 'Designer' 
    ]
;

deleteUser = id => 
    // delete operation to remove item
;

renderItems = () => 
    const data = this.state.userData;

    const mapRows = data.map((item, index) => (
        
            

                /* Passing unique value to 'key' prop, eases process for virtual DOM to remove specific element and update HTML tree  */
                Name : item.name
                User Type: item.user_type
                 this.deleteUser(item.id)>
                    Delete User
                
            
        
    ));
    return mapRows;
;

render() 
    return 
this.renderItems()
;

Importante : Decisión de usar qué valor debemos pasar a key prop también importa ya que la forma común es usar index parámetro proporcionado por .map().

TLDR; Pero hay un inconveniente y evítelo tanto como sea posible y use cualquier id a partir de datos que se están iterando, como item.id. Hay un buen artículo sobre esto: https://medium.com/@robinpokorny/index-as-a-key-es-un-anti-patron-e0349aece318

Si crees que ha sido de provecho este post, sería de mucha ayuda si lo compartieras con otros desarrolladores así contrubuyes a extender esta información.

---

---

Utiliza Nuestro Buscador