El renderizado de listas es la forma de iterar un array de elementos y renderizar elementos de React para cada uno de ellos.
Para hacer renderizado de listas en React usamos el método map
de los arrays:
function List({ items }) {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)
}
En este caso, se renderiza una lista de elementos usando el componente List
. El componente List
recibe una prop items
que es un array de objetos del tipo [{ id: 1, name: "John Doe" }]
. El componente List
renderiza un elemento li
por cada elemento del array.
El elemento li
tiene una prop key
que es un identificador único para cada elemento. Esto es necesario para que React pueda identificar cada elemento de la lista y actualizarlo de forma eficiente. Más adelante hay una explicación más detallada sobre esto.