Asignar una matriz de objetos en React

Una de las muchas características excelentes de la biblioteca React es que es altamente dinámica y puede representar dinámicamente y no representar ciertos elementos.

A menudo, los desarrolladores web tienen grandes volúmenes de datos y desean mostrarlos en la pantalla y, por lo general, tienen el formato de una matriz de objetos. Este artículo mostrará cómo mapear una matriz de objetos en React y discutirá posibles casos de uso para esta operación.

Use el método map() para mapear una matriz de objetos en React

La biblioteca React se basa en JavaScript para que pueda usar métodos como map() para revisar una variedad de objetos. Los datos externos a menudo se almacenan como una matriz de objetos; por lo tanto, al desarrollar aplicaciones web en React, a menudo tendrá que mapear una serie de objetos.

Hay varias formas de recorrer una matriz en JavaScript. Puede utilizar el bucle for, el método forEach(), o incluso el bucle while.

Todo desarrollador web prefiere usar map() porque puede revisar una variedad de objetos y generar nuevos elementos o componentes de React dentro de JSX.

JSX es una sintaxis similar a HTML especial para construir el diseño de los componentes de React. Le permite incrustar expresiones de JavaScript dentro de lo que parece ser su código HTML.

Esto facilita la generación dinámica de elementos, componentes y valores de React. JSX no admite otras formas de iterar a través de una matriz, map() es el único método admitido.

Veamos un ejemplo de cómo mapear una matriz de objetos en React:

export default function App() {
  const arr = [
    { name: "Irakli", height: 180 },
    { name: "Chris", height: 190 },
    { name: "Michael", height: 176 },
    { name: "John", height: 182 },
    { name: "Todd", height: 198 },
    { name: "Jack", height: 178 }
  ];
  return (
    <div className="App">
      {arr.map((person) => (
        <div
          style={{
            border: "2px solid black",
            margin: "30px auto",
            width: "30%"
          }}
        >
          <p>name: {person.name}</p>
          <p>height: {person.height}</p>
        </div>
      ))}
    </div>
  );
}

En este código de ejemplo, tenemos una matriz simple de objetos. Cada elemento de la matriz representa a una persona.

Puede consultar la demostración en vivo en CodeSandbox y ver qué representa el método map().

Dentro de JSX (en la instrucción return), usamos el método .map() para revisar cada elemento de la matriz.

El método map() toma un argumento: una función de devolución de llamada que se ejecutará en cada elemento de la matriz. La función de devolución de llamada toma un argumento para cada elemento de la matriz.

En este caso, el método recorrerá toda la matriz de objetos, y cada elemento de la matriz se utilizará como argumento de persona. Como puede ver, tomamos las propiedades nombre y altura del argumento persona y las usamos para generar valores para dos elementos <p> en la salida.

No olvide que para escribir expresiones JavaScript (como ejecutar un método map()) en JSX, debe envolverlas entre llaves.

En última instancia, el método map() generará una nueva matriz, que transforma una matriz de objetos en una matriz de elementos (o componentes) de React.