ReactJS | Liza

Las listas son muy útiles cuando se trata de desarrollar la interfaz de usuario de cualquier sitio web. Las listas se utilizan principalmente para mostrar menús en un sitio web, por ejemplo, el menú de la barra de navegación. En JavaScript normal, podemos usar arrays para crear listas. Podemos crear listas en React de manera similar a como lo hacemos en JavaScript normal. Veremos cómo hacer esto en detalle más adelante en este artículo.
Primero veamos cómo podemos recorrer y actualizar cualquier lista en JavaScript normal. Podemos usar la función map() en JavaScript para recorrer las listas.

A continuación, el código JavaScript ilustra el uso de la función map() para recorrer listas:  

<script type="text/javascript">
    var numbers = [1,2,3,4,5];
  
    const updatedNums = numbers.map((number)=>{
        return (number + 2);
    });
  
    console.log(updatedNums);
</script>

El código anterior registrará el siguiente resultado en la consola:  

[3, 4, 5, 6, 7]

Ahora creemos una lista de elementos en React. Representaremos los números de lista en el código anterior como un elemento de lista desordenado en el navegador en lugar de simplemente iniciar sesión en la consola. Para hacer esto, recorreremos la lista usando la función map() de JavaScript y actualizaremos los elementos para incluirlos entre los elementos <li> </li>. Finalmente, envolveremos esta nueva lista dentro de los elementos <ul> </ul> y la representaremos en el DOM.

El siguiente código ilustra esto:  

import React from 'react';
import ReactDOM from 'react-dom';
  
const numbers = [1,2,3,4,5];
  
const updatedNums = numbers.map((number)=>{
    return <li>{number}</li>;
});
  
ReactDOM.render(
    <ul>
        {updatedNums}
    </ul>, 
    document.getElementById('root')
);

El código anterior generará una lista desordenada como se muestra en el siguiente resultado: 

Listas de renderizado dentro de Componentes

En el código anterior en React, habíamos representado directamente la lista en el DOM. Pero por lo general, esta no es una buena práctica para generar listas en React. Ya hemos hablado sobre los usos de los Componentes y hemos visto que todo en React está construido como componentes individuales. Considere el ejemplo de un menú de navegación. Es obvio que en cualquier sitio web los elementos de un menú de navegación no están codificados. Este elemento se obtiene de la base de datos y luego se muestra como listas en el navegador. Entonces, desde el punto de vista del componente, podemos decir que pasaremos una lista a un componente usando accesorios y luego usaremos este componente para representar la lista en el DOM. Podemos actualizar el código anterior en el que hemos representado directamente la lista para ahora un componente que aceptará una array como accesorios y devolverá una lista desordenada. 

import React from 'react';
import ReactDOM from 'react-dom';
  
// Component that will return an
// unordered list
function Navmenu(props)
{
    const list = props.menuitems;
  
    const updatedList = list.map((listItems)=>{
        return <li>{listItems}</li>;
    });
  
    return(
        <ul>{updatedList}</ul>
    );
}
  
const menuItems = [1,2,3,4,5];
  
ReactDOM.render(
    <Navmenu menuitems = {menuItems} />, 
    document.getElementById('root')
);

Producción: 

Puede ver en el resultado anterior que la lista desordenada se representa correctamente en el navegador, pero se registra un mensaje de advertencia en la consola. 

Warning: Each child in an array or iterator
         should have a unique "key" prop

El mensaje de advertencia anterior dice que cada uno de los elementos de la lista en nuestra lista desordenada debe tener una clave única. Una «clave» es un atributo de string especial que debe incluir al crear listas de elementos en React. Hablaremos sobre las claves en detalle en otros artículos. Por ahora, vamos a asignar una clave de string a cada uno de los elementos de nuestra lista en el código anterior.

A continuación se muestra el código actualizado con claves:  

import React from 'react';
import ReactDOM from 'react-dom';
  
// Component that will return an
// unordered list
function Navmenu(props)
{
    const list = props.menuitems;
  
    const updatedList = list.map((listItems)=>{
        return(
                <li key={listItems.toString()}>
                    {listItems}
                </li>
            ); 
    });
  
    return(
        <ul>{updatedList}</ul>
    );
}
  
const menuItems = [1,2,3,4,5];
  
ReactDOM.render(
    <Navmenu menuitems = {menuItems} />, 
    document.getElementById('root')
);

Este código dará el mismo resultado que el código anterior pero esta vez sin ninguna advertencia. Las claves se utilizan en React para identificar qué elementos de la lista se cambian, actualizan o eliminan. En otras palabras, podemos decir que las claves se utilizan para dar una identidad a los elementos de las listas. Aprenderemos sobre las teclas con más detalle en nuestro próximo artículo.