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.
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.
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.
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
.
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>
</>
);
}
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.