Cómo renderizar matrices en React

Introducción

Este artículo le enseñará a renderizar una matriz en React y cuáles son las mejores prácticas para renderizar diferentes elementos dentro de los componentes.

Una de las ventajas de usar un lenguaje web moderno como JavaScript es que puede automatizar rápidamente la generación de los fragmentos HTML.

Usar algo similar a un bucle, en vez de una matriz o un objeto, significa que solo debe escribir el HTML para cada elemento una sola vez. Mejor aún, las futuras ediciones solo deben aplicarse una vez.

Cómo renderizar múltiples elementos

Para renderizar múltiples elementos JSX en React, puede ejecutar un bucle en una matriz con el método .map() y devolver un solo elemento.

A continuación, ejecute un bule en la matriz reptiles y devuelva un elemento li para cada elemento en la matriz. Puede usar este método cuando desee mostrar un solo elemento para cada elemento de la matriz:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

El resultado tendrá el siguiente aspecto:

Output
- alligator
- snake
- lizard

En el siguiente ejemplo, examinará por qué es recomendable añadir una key única a una lista de elementos renderizados por una matriz.

Cómo renderizar una colección de elementos dentro de un componente

En este ejemplo, ejecutará un bucle en una matriz y creará una serie de componentes de elemento de lista, como en el ejemplo anterior.

Para comenzar, actualice el código para usar el componente <ol> para mantener los elementos <li>. El componente <ol> creará una lista ordenada de los elementos:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

Sin embargo, si observa la consola, verá una advertencia indicando que cada elemento secundario en una matriz o iterador debe tener una key única.

La advertencia aparece porque, al intentar renderizar una colección dentro de un componente, debe agregar una key.

En React, se utiliza una key única para determinar cuáles de los componentes de una colección deben volverse a renderizar. Añadir una key única evita que React tenga que volver a renderizar todo el componente cada vez que haya una actualización.

En este paso, renderizará múltiples elementos en un componente y añadirá una key única. Actualice el código para incluir una key en los elementos de la lista para resolver la advertencia:

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

Ahora que añadió una key, la advertencia ya no aparecerá en la consola.

En el siguiente ejemplo, verá cómo renderizar elementos adyacentes sin encontrar un error de sintaxis común.

Cómo renderizar elementos adyacentes

En JSX, para renderizar más de un elemento en un componente, debe agregar un contenedor alrededor de ellos.

En este ejemplo, primero devolverá una lista de elementos sin ejecutar un bucle en una matriz:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

Esto generará un error grave en la consola:

Para solucionar este error, deberá encapsular el bloque de elementos li en un contenedor. Para obtener una lista, puede encapsularlos en un elemento ol o ul:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Los elementos <li> adyacentes ahora están encapsulados en una etiqueta <ol>, y ya no se visualizará el error.

En la siguiente sección, renderizará una lista en un contenedor usando un componente fragment.

Cómo renderizar elementos adyacentes con React.fragment

Antes de React v16.2, un bloque de componentes se podía encapsular en un elemento <div>. Esto daba como resultado a una aplicación llena de divs, a menudo denominada “div soup”.

Para solucionar este problema, React lanzó un nuevo componente conocido como fragment:

Cuando necesite renderizar una lista dentro de una etiqueta cerrada, pero quiera evitar tener que usar un div, puede usar React.Fragment en su lugar:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

El código renderizado solo incluirá los elementos li, y el componente React.Fragment no aparecerá en el código.

Además, tenga en cuenta que con React.fragment no necesita añadir una key.

Notará que escribir React.fragment es más tedioso que añadir un <div>. Por suerte, el equipo de React desarrolló una sintaxis más corta para representar este componente. Puede usar <> </> en lugar de <React.Fragment></React.Fragment>:

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Conclusión

En este artículo, analizó varios ejemplos para renderizar matrices en una aplicación React.

Al renderizar un elemento dentro de otro componente, debe usar una key única y encapsular los elementos dentro de un elemento contenedor.

Dependiendo de su caso de uso, puede crear listas simples encapsuladas en un componente fragment que no necesite una key.

Para obtener más información sobre las mejores prácticas en React, siga la serie completa Cómo codificar en React.js en DigitalOcean.