Bucle a través de un objeto en React

Este tutorial demuestra el uso de los métodos forEach(), Object.keys y map() para recorrer un objeto en React.

Bucle a través de un objeto en React

En React, a menudo usamos el método .map() para generar componentes (o elementos DOM) tomando datos de la matriz.

Por ejemplo, si está ejecutando una tienda de comercio electrónico, podría tener una matriz de objetos, donde cada objeto contiene información detallada sobre un producto. Luego, recorrería esta matriz para generar componentes para cada producto.

En React, generar componentes repasando los elementos de la matriz es una operación estándar. Sin embargo, recorrer un objeto es un poco más complicado y requiere pasos adicionales.

Aprendamos ¿cómo?

Use Object.keys() y map() para recorrer un objeto en React

Primero, necesita generar la matriz de propiedades de Objeto utilizando el método Object.keys(), que toma el objeto como argumento.

Luego puede usar el método .map() con esta matriz y generar componentes personalizados para cada propiedad. Veamos este ejemplo:

export default function App() {
  const person = {
    firstName: "Irakli",
    lastName: "Tchigladze",
    age: 24,
    occupation: "writer"
  };
  return (
    <div className="App">
      {Object.keys(person).map((key) => (
        <h1>{key + " - " + person[key]}</h1>
      ))}
    </div>
  );
}

Aquí tenemos un objeto persona con cuatro propiedades para describir a la persona. Dentro de JSX, usamos el método Object.keys() para obtener la lista de todas las propiedades del objeto.

Luego usamos un método .map() para devolver una nueva matriz de elementos <h1> que muestran la propiedad del objeto y su valor. Vea la salida a continuación.

Producción :

firstName - Irakli
lastName - Tchigladze
age - 24
occupation - writer

Use el método forEach() para recorrer un objeto en React

También puede recorrer con éxito las propiedades de un objeto utilizando el método forEach(). Primero, sin embargo, es esencial comprender el comportamiento de este método.

No devuelve una nueva matriz compuesta de elementos modificados como lo hace el método .map(). En cambio, debemos crear una nueva matriz, modificar cada elemento de la matriz y usar el método push() para agregar el elemento modificado a la nueva matriz.

Veamos un ejemplo a continuación:

const modifiedArray = [];
  Object.keys(person).forEach(function (key) {
    modifiedArray.push(<h1>{key + " - " + person[key]}</h1>);
  });

Luego puede hacer referencia al modifiedArray dentro de JSX de la siguiente manera:

<div className="App">{modifiedArray}</div>