Cómo mapear una matriz de objetos en React

Solución:

Lo que necesita es mapear su matriz de objetos y recordar que cada elemento será un objeto, por lo que usará, por ejemplo, la notación de puntos para tomar los valores del objeto.

En tu componente

 [
    {
        name: 'Sam',
        email: '[email protected]'
    },

    {
        name: 'Ash',
        email: '[email protected]'
    }
].map((anObjectMapped, index) => {
    return (
        <p key={`${anObjectMapped.name}_{anObjectMapped.email}`}>
            {anObjectMapped.name} - {anObjectMapped.email}
        </p>
    );
})

Y recuerde que cuando coloca una matriz de jsx tiene un significado diferente y no puede simplemente poner un objeto en su método de renderizado, ya que puede poner una matriz.

Eche un vistazo a mi respuesta al mapear una matriz a jsx

Creo que desea imprimir el nombre de la persona o tanto el nombre como el correo electrónico:

const renObjData = this.props.data.map(function(data, idx) {
    return <p key={idx}>{data.name}</p>;
});

o :

const renObjData = this.props.data.map(function(data, idx) {
   return ([
       <p key={idx}>{data.name}</p>,
       <p key={idx}>{data.email}</p>,
   ]);
});

@FurkanO ha proporcionado el enfoque correcto. Aunque para optar por un enfoque más limpio (forma es6), puede hacer algo como esto

[{
    name: 'Sam',
    email: '[email protected]'
 },
 {
    name: 'Ash',
    email: '[email protected]'
 }
].map( ( {name, email} ) => {
    return <p key={email}>{name} - {email}</p>
})

¡Salud!

---

---

Utiliza Nuestro Buscador