Cómo hacer un bucle en React JSX

En este breve tutorial, aprenda cómo recorrer React JSX en JavaScript y lidiar con Advertencia: ¡Cada niño en una lista debe tener un accesorio de clave único!

Javascript Syntax Extension (JSX), es una extensión de JavaScript desarrollada y popularizada por React framework que le permite estructurar la representación de elementos. Básicamente, facilita la escritura de código HTML en React (describa la interfaz de usuario) y, debido a su flexibilidad, JSX ha sido adoptado por otros marcos populares como Vue.js a lo largo de los años.

En este breve tutorial, veremos cómo hacer un bucle dentro de los elementos JSX de reacción, trabajando con la siguiente matriz todos:

1
2
3
4
5
const todos = [
  { id: 1, text: "Learn React", status: "completed" },
  { id: 2, text: "Do something", status: "incomplete" },
  { id: 3, text: "Do something else", status: "incomplete" },
];

Bucle en React JSX

La función map() introducida en [ES6]{herf=“https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel=“nofollow noopener noreferrer” target ="_blank”} es el único método preferido para hacer un bucle en JSX:

1
2
3
4
5
6
7
{
  todos.map((todo) => (
    <p key={todo.id}>
      {todo.text} - {todo.status}
    </p>
  ));
}

Para cada elemento de la matriz, asignamos sus campos texto y estado al contenido dentro de un elemento <p>, cuya clave se asigna al campo id. Esto generará el siguiente resultado de marcado:

1
2
3
<p>Learn React - completed</p>
<p>Do something - incomplete</p>
<p>Do something else - incomplete</p>

Comprender el atributo key

Dependiendo de la herramienta de framework/linting que esté usando, si no usa un valor clave único para cada elemento <p>, es probable que encuentre una advertencia:

1
Warning: Each child in a list should have a unique "key" prop

Las claves en el bucle React ayudan a identificar qué elementos se han cambiado, agregado o eliminado, y es importante dar a los elementos principales dentro de un bucle claves únicas para ayudar a dar una identidad estable al elemento o componente.

Al igual que en nuestro ejemplo de matriz todos, podemos especificar cada id de todo como clave:

1
2
3
4
5
6
7
8
9
{
  todos.map((todo) => (
    <div key={todo.id}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

Si el elemento que está tratando de recorrer no tiene un elemento único, como un ‘id’ único, es una convención común usar el ‘índice’ devuelto por la función ‘mapa ()’ para cada elemento iterado en su lugar. , asegurando la identificación de elementos únicos sin cambiar su modelo de dominio:

1
2
3
4
5
6
7
8
9
{
  todos.map((todo, index) => (
    <div key={index}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

Conclusión

En este breve tutorial, cubrimos los conceptos básicos de los bucles en React JSX, cómo funcionan las claves y cómo agregar una clave única a los elementos iterables.