Listas de reacción
En React, renderizarás listas con algún tipo de bucle.
El método de matriz de JavaScript map()es generalmente el método preferido.
Si necesita un repaso del map()método, consulte la
sección ES6 .
Ejemplo:
Rendericemos todos los autos 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>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Cuando ejecute este código en su create-react-app, funcionará, pero recibirá una advertencia de que no se proporciona una "clave" para los elementos de la lista.
¡Obtener la certificación!
$95 INSCRÍBETE
Teclas
Las claves permiten a React realizar un seguimiento de los elementos. De esta forma, si se actualiza o elimina un elemento, 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 globalmente.
Generalmente, la clave debe ser una identificación única asignada a cada elemento. Como último recurso, puede utilizar el índice de 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>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));