Keys and List: ¿Cómo manejar las listas y condicionales en React JS?

¿Qué aprenderás de las listas?

• Una forma simple de importar un archivo JSON en react.
• Conocerás y aprenderás a extraer datos utilizando la función map.
• Veremos como y por qué se deben agregar keys a los elementos extraídos de map.
• Realizaremos un ejemplo de como utilizar las condicionales en React

Repositorio:

• Puedes descargar el código de esta clase dando clic aquí "lists-and-keys".
• O puedes clonar el repositorio y cambiar a la rama "lists-and-keys".

git clone https://github.com/EWebik/react-js.git
git checkout lists-and-keys

¿Qué son las listas en React JS?

Las listas hacen referencia a un arreglo de datos el cual puede ser:

• Un arreglo de objetos
• O pueden ser arreglos de datos simples, como caracteres, números, etc.

Y como toda lista en programación, React nos permite recorrerlas con la intención de extraer sus elementos y mostrarlos en la DOM.

¿Para que sirven las listas en React?

En esencia  sirven para agrupar datos u objetos que utilizaremos dentro de JSX para renderear elementos en la DOM de nuestra página.

En muchos proyectos las utilizarás para cargar tus componentes, y un ejemplo claro de esto son las tablas, donde con una lista deberás cargar el contenido de un componente tipo tabla. Te invito a ver el vídeo para que comprendas y aprendas como hacer esto.

¿Cómo renderizar una colección de datos en React?

Para iterar una colección de datos, React nos proporciona el método map, el cual podemos utilizar perfectamente con la sintaxis JSX, por ejemplo:

class Componente extends React.Component{
  render(){
    return(
      <>
        <h2 className="centrar">{"Curso de React by EWebik Listas y condiciones"}</h2>
        <div className="cont-tabla">
          <table>
            <thead>
              <tr>
                <th>Nombre</th>
                <th>Categoría</th>
                <th>Precio</th>
                <th>Cantidad vendidos</th>
                <th>En almacen</th>
                <th>Fecha</th>
              </tr>
            </thead>
            <tbody>
              {
                datos.map((dato,index)=>
                  <tr
                    key={dato.id}
                    className={index%2 == 0 ? '':'trColor'}>
                    <td>{dato.nombre}</td>
                    <td>{dato.categoria}</td>
                    <td>{dato.precio}</td>
                    <td>{dato.cantidad_vendidos}</td>
                    <td>{dato.en_almacen}</td>
                    <td>{dato.fecha_alta}</td>
                  </tr>
                )
              }
            </tbody>
          </table>
        </div>
      </>
    );
  }
}

En el código anterior tenemos una tabla que tiene 6 columnas y para poder poblarla de datos usamos map.

<tbody>
         {
                datos.map((dato,index)=>
                  <tr
                    key={dato.id}
                    className={index%2 == 0 ? '':'trColor'}>
                    <td>{dato.nombre}</td>
                    <td>{dato.categoria}</td>
                    <td>{dato.precio}</td>
                    <td>{dato.cantidad_vendidos}</td>
                    <td>{dato.en_almacen}</td>
                    <td>{dato.fecha_alta}</td>
                  </tr>
                )
        }
</tbody>

Para extraer los datos, map es una función que regresa dos parámetros el "dato" el cual es el elemento o dato que extraemos del array y un "index" o indice, el cual es el indice de la posición del elemento extraído dentro del arreglo.

Condicionales en React

En efecto, dentro de este mismo código hacemos uso de condicionales es bastante simple ya que con una condicionar podemos elegir si se muestra un elemento, un componente o prácticamente cualquier cosa valida dentro de JSX.

En este caso lo que vamos hacer es utilizar una condición para agregar la clase trColor en el tag TR el cual sirve para crear una fila dentro de la estructura de una tabla.

className={index%2 == 0 ? '':'trColor'}

Si el módulo 2 del index es igual a cero no agregará ninguna clase de CSS, mientras que si es impar (módulo 2 diferente de cero) agregará la clase trColor pintando el fondo de un color diferente.

Entonces, nuestro componente tiene la siguiente salida en la DOM.

Keys en React

Cuando extraemos datos de un arreglo, al momento de hacer el render y montar los elementos en la DOM, React requiere que agreguemos un indice al elemento que envuelve todo lo que esta adentro del map.

Por ejemplo, en el código que hemos visto tenemos la propiedad key={} que agregamos al TR que envuelve las columnas de la tabla.

            <tbody>
              {
                datos.map((dato,index)=>
                  <tr
                    key={dato.id}
                    className={index%2 == 0 ? '':'trColor'}>
                    <td>{dato.nombre}</td>
                    ...
                    <td>{dato.fecha_alta}</td>
                  </tr>
                )
              }
            </tbody>

Bien, React indica en la documentación que la mejor practica es pasarle al atributo Key un dato único, el cual puede ser un id personalizado que tengamos en nuestros datos, en este caso al JSON de prueba le he agregado un id el cual es simplemente un autoincremental.

key={dato.id}

Por otra parte, si no contamos con un indice personalizado podemos pasarle el index que viene de map, y funcionara sin problema.

No obstante no es lo mejor, ya que si los elementos cambian en tiempo de ejecución, el orden de los indices cambiarán también, lo que provocará un impacto negativo de rendimiento.

Espero que este capítulo haya despejado dudas y hayas aprendido como manejar las listas, condiciones y keys en React, recuerda compartir en redes sociales para ayudar a más personas.