Listas de reacción

En React, renderizará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 .

Rendericemos todos los autos de nuestro garaje:

import React from 'react';

import ReactDOM from 'react-dom/client';

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 se proporciona ninguna "clave" para los elementos de la lista.

Llaves

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

Las claves deben ser únicas para cada hermano. Pero se pueden duplicar a nivel global.

Generalmente, la clave debe ser una identificación única asignada a cada elemento. Como último recurso, puede utilizar el índice de la matriz como clave.

Refactoricemos nuestro ejemplo anterior para incluir claves:

import React from 'react';

import ReactDOM from 'react-dom/client';

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 />);