Saltar al contenido

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
  • )); 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.

    ¡Haz clic para puntuar esta entrada!
    (Votos: 3 Promedio: 4.3)



    Utiliza Nuestro Buscador

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *