Bucle a través de una matriz de objetos en React

1. Bucle a través de una matriz de objetos en JSX
2. Use .map() para recorrer una matriz de objetos en React
3. Use forEach() para recorrer una matriz de objetos en React
4. Use for para recorrer una matriz de objetos en React

React es un marco front-end popular porque brinda a los desarrolladores todas las funciones necesarias para crear aplicaciones web rápidas y potentes.

Bucle a través de una matriz de objetos en JSX

JSX es el lenguaje de plantillas predeterminado para React. Se parece mucho a HTML, pero en realidad, es simplemente una forma conveniente de escribir código JavaScript.

Debido a esto, los desarrolladores de React pueden usar métodos comunes de JavaScript dentro de JSX, siempre que usen llaves para marcar expresiones de JavaScript.

Use .map() para recorrer una matriz de objetos en React

Los desarrolladores front-end generalmente necesitan crear hermosas interfaces de usuario para mostrar los datos recibidos de fuentes externas. Los datos se pueden formatear de varias maneras.

Sin embargo, si tiene datos de publicaciones, listados de productos o elementos similares, lo más probable es que tenga el formato de una matriz de objetos. Cada objeto contendrá información sobre el elemento: su título, contenido principal, etiquetas meta, imagen principal, etc.

Como desarrollador de React, puede recorrer fácilmente una variedad de objetos. Debe usar el método JavaScript .map(), que revisa cada elemento de la matriz y genera cada elemento modificado.

Echemos un vistazo a un ejemplo:

export default function App() {
  const postsArray = [
    {
      title: "How to Learn React",
      content:
        "React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
    },
    {
      title: "How to Learn Vue",
      content:
        "First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
    },
    {
      title: "How to Learn HTML",
      content:
        "Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
    }
  ];
  return (
    <div className="App">
      <h1>Coding Blog</h1>
      {postsArray.map((post) => {
        return <Post post={post}></Post>;
      })}
    </div>
  );
}
function Post(props) {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>{props.post.content}</p>
    </div>
  );
}

Aquí, tenemos dos componentes: el componente principal <App> y el componente secundario <Post>. En el componente principal, definimos una variable postsArray para simular datos externos que podría recibir de la API.

Nuestra aplicación es bastante simple: en el componente principal <App>, tenemos un encabezado para el blog. También usamos el método .map() para revisar cada elemento de la matriz.

Como mencionamos, el método .map() nos permite generar una versión modificada de cada elemento. En nuestro caso, cada elemento es un objeto que contiene datos de publicación: su título y contenido.

Tomamos cada objeto y lo pasamos como accesorios al componente <Post>.

Accedemos a los datos recibidos a través de accesorios en el componente secundario y los mostramos como un encabezado y un párrafo.

Si observa la demostración en vivo en CodeSandbox, verá que nuestro método .map() devuelve tres componentes <Post>. Un componente para cada objeto de la matriz.

Es importante fijarse en la sintaxis de la función .map(). Comenzamos escribiendo llaves de apertura y cierre para que podamos hacer referencia a una variable que contiene la matriz.

Luego llamamos al método .map() en la matriz y proporcionamos su argumento: una función de devolución de llamada para revisar cada elemento de la matriz. Finalmente, cuando devolvemos elementos JSX o HTML, necesitamos usar datos en cada elemento de la matriz (que son objetos) para completar el contenido de cada elemento devuelto.

Use forEach() para recorrer una matriz de objetos en React

El método de matriz forEach() ofrece una alternativa a la escritura detallada de bucles for. También puedes usarlo en React.

forEach() no puede devolver elementos HTML, pero puede generar elementos HTML e insertarlos en una matriz. Luego puede hacer referencia a esa matriz dentro de JSX para mostrar los elementos que creó.

export default function App() {
  const postsArray = [
    {
      title: "How to Learn React",
      content:
        "React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
    },
    {
      title: "How to Learn Vue",
      content:
        "First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
    },
    {
      title: "How to Learn HTML",
      content:
        "Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
    }
  ];
  const posts = []
  postsArray.forEach(post => posts.push(<div>
                                          <h1>{post.title}</h1>
                                          <p>{post.content}</p>
                                        </div>)
                    )
  return (
    <div className="App">
      <h1>Coding Blog</h1>
      {posts}
    </div>
  );
}

Use for para recorrer una matriz de objetos en React

La declaración for es la forma principal de recorrer una matriz de objetos en JavaScript. Sin embargo, no puede usarlo para representar elementos dentro de JSX. Por esta razón, debe definir un bucle for fuera de JSX.

Por ejemplo, imaginemos que tenemos la misma matriz de publicaciones que en el ejemplo anterior.

export default function App() {
  const postsArray = [
    {
      title: "How to Learn React",
      content:
        "React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
    },
    {
      title: "How to Learn Vue",
      content:
        "First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
    },
    {
      title: "How to Learn HTML",
      content:
        "Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
    }
  ];
  const posts = []
  for (let i = 0; i < postsArray.length; i++){
      posts.push(<div>
                     <h1>{postsArray[i].title}</h1>
                     <p>{postsArray[i].content}</p>
                 </div>)
  }
  return (
    <div className="App">
      <h1>Coding Blog</h1>
      {posts}
    </div>
  );
}

En este ejemplo, creamos elementos HTML iterando cada elemento en la variable postArray. Empujamos elementos HTML en la matriz de publicaciones recién creada.

No podemos usar el bucle for en JSX. En su lugar, hacemos referencia a la variable posts, que contiene elementos HTML que generamos utilizando datos de la variable de estado postArray.

Use la sintaxis for...of para recorrer una matriz de objetos en React

Los desarrolladores pueden reemplazar el ciclo for en el ejemplo anterior con la nueva sintaxis más legible para recorrer una matriz:

const posts = []
for (let post of postsArray){
    posts.push(<div><h1>{post.title}</h1></div>)
}

Este es un enfoque más legible. Todas las demás partes del código pueden permanecer igual.