Listas en React

En JavaScript

Primero, repasemos cómo transformar las listas en JavaScript.

En el código de aquí debajo, tomamos una lista de números y utilizamos map() para duplicar los valores. Asignaremos el resultado devuelto por map() a una nueva variable.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

Este código imprime [2, 4, 6, 8, 10] en consola.

En react transformar listas de valores en listas de elements es casi igual.

Renderizando multiples componentes con React

Podemos crear una colección de elementos e incrustarlos en nuestro JSX con las llaves {}.

Siguiendo el ejemplo de los números, hagamos un componente que tome la lista de números y los convierta en react elements utilizando map() y JSX.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

Ahora rendericemos la lista completa dentro de un elemento <ul> para mostrar una lista de numeros del 1 al 5:

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

Componente de lista básico

Muchas veces necesitaremos renderizar listas dentro de nuestros componentes. Cambiemos un poco el ejemplo de los números y hagamos un componente que reciba una prop con una lista de números y renderice una lista ordenada.

const NumberList = (props) => {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
​
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Listo, funciona. Pero si miramos la consola veremos un error que menciona que hay agregar una key a cada elemento de la lista.

const NumberList = (props) => {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
​
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Las keys ayudan a react a identificar qué elementos han cambiado, se han agregado o se han eliminado de la lista.

Práctico - Step 2

Partiendo de step2_App.js, vamos a modificar la ultima solución que creamos pero en vez de mostrar una lista fija de productos, mostrar una lista que recibamos por Props en nuestro componente.

Tambien hay que definir los PropTypes para Item y ListOfItems !! (La librería ya esta instalada, pero deben agregar el import correspondiente)