Comprender cómo renderizar matrices en React

Introducción

Este artículo le enseñará cómo renderizar una matriz en React y las mejores prácticas a utilizar al renderizar diferentes elementos dentro de los componentes.

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

Si utilizas algo como un bucle en una matriz o un objeto, solo tendrás que escribir el código HTML por elemento una vez. Mejor aún, cualquier edición futura solo se tendrá que aplicar una vez.

Representación de múltiples elementos

Para representar múltiples elementos JSX en React, puedes recorrer una matriz con el .map()método y devolver un solo elemento.

A continuación, recorra la reptilesmatriz y devuelva un lielemento por cada elemento de la matriz. Puede utilizar este método cuando desee mostrar un solo elemento por cada elemento de la matriz:

function ReptileListItems() {  const reptiles = ["alligator", "snake", "lizard"];  return reptiles.map((reptile) = li{reptile}/li);}

El resultado se verá así:

Output- alligator- snake- lizard

En el siguiente ejemplo, examinará por qué querría agregar un elemento único keya una lista de elementos representados por una matriz.

Representación de una colección de elementos dentro de un componente

En este ejemplo, recorre una matriz y crea una serie de componentes de elementos de lista como en el ejemplo anterior.

Para comenzar, actualice el código para utilizar el olcomponente para almacenar los lielementos. El olcomponente 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 miras la consola, verás una advertencia de que cada hijo de una matriz o iterador debe tener una clave única.

La advertencia aparece porque cuando intentas renderizar una colección dentro de un componente, debes agregar un key.

En React, keyse utiliza un valor único para determinar cuál de los componentes de una colección se debe volver a renderizar. Agregar un valor único keyevita que React tenga que volver a renderizar todo el componente cada vez que hay una actualización.

En este paso, representará varios elementos en un componente y agregará un único key. Actualice el código para incluir un keyen 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 has agregado un key, la advertencia ya no aparecerá en la consola.

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

Representación de elementos adyacentes

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

En este ejemplo, primero devolverá una lista de elementos sin recorrer una matriz:

function ReptileListItems() {  return (    lialligator/li    lisnake/li    lilizard/li  );}

Esto le dará un error grave en la consola:

Para solucionar este error, debe envolver el bloque de lielementos en un contenedor. Para una lista, puede envolverlos en un elemento olor ul:

function ReptileListItems() {  return (  ol    lialligator/li    lisnake/li    lilizard/li  /ol  );}

Los elementos adyacentes liahora están envueltos en una etiqueta envolvente, oly ya no verá un error.

En la siguiente sección, representarás una lista en un contenedor usando un fragmentcomponente.

Representación de elementos adyacentes conReact.fragment

Antes de React v16.2, se podía envolver un bloque de componentes en un divelemento. Esto generaba una aplicación llena de elementos divs, a lo que a menudo se denominaba “sopa de divs”.

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

Cuando necesitas representar una lista dentro de una etiqueta envolvente pero quieres evitar tener que usar un div, puedes usar React.Fragmenten su lugar:

function ReptileListItems() {  return (  React.Fragment     lialligator/li     lisnake/li     lilizard/li  /React.Fragment  );}

El código renderizado solo incluirá los lielementos y el React.Fragmentcomponente no aparecerá en el código.

Además, tenga en cuenta que React.fragmentno es necesario agregar una clave.

Es posible que notes que escribir React.fragmentes más tedioso que agregar un div. Afortunadamente, el equipo de React desarrolló una sintaxis más corta para representar este componente. Puedes usar /en lugar de React.Fragment/React.Fragment:

function ReptileListItems() {  return (     lialligator/li    lisnake/li    lilizard/li /  );}

Conclusión

En este artículo, exploró varios ejemplos de cómo representar matrices en una aplicación React.

Al representar un elemento dentro de otro componente, debe utilizar un elemento único keyy envolver sus elementos dentro de un elemento contenedor.

Dependiendo de su caso de uso, puede crear listas simples envueltas en un fragmentcomponente que no necesita una clave.

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.