Listas

 En React, representarás listas con algún tipo de bucle.

El map()método de matriz de JavaScript es generalmente el método preferido.

Si necesita un repaso del map()método, consulte la sección ES6 .

Vamos a renderizar todos los coches de nuestro garaje:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Cuando ejecute este código en su create-react-app, funcionará pero recibirá una advertencia de que no hay ninguna "clave" proporcionada para los elementos de la lista.

Llaves

Las claves permiten a React realizar un seguimiento de los elementos. De esta manera, si se actualiza o elimina un elemento, solo se volverá a mostrar ese elemento en lugar de la lista completa.

Las claves deben ser únicas para cada hermano, pero pueden duplicarse globalmente.

En general, la clave debe ser un identificador único asignado a cada elemento. Como último recurso, puede utilizar el índice de la matriz como clave.

Ejemplo:

Refactoricemos nuestro ejemplo anterior para incluir claves:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

yguy