Listes de réaction
Dans React, vous rendrez des listes avec un certain type de boucle.
La méthode de tableau JavaScript map()est généralement la méthode préférée.
Si vous avez besoin d'un rappel sur la map()méthode, consultez la
section ES6 .
Exemple:
Rendons toutes les voitures de notre garage :
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'));
Lorsque vous exécutez ce code dans votre create-react-app, cela fonctionnera mais vous recevrez un avertissement indiquant qu'aucune "clé" n'est fournie pour les éléments de la liste.
Obtenir une certification!
95 $ S'INSCRIRE
Clés
Les clés permettent à React de garder une trace des éléments. De cette façon, si un élément est mis à jour ou supprimé, seul cet élément sera restitué au lieu de la liste entière.
Les clés doivent être uniques pour chaque frère. Mais ils peuvent être dupliqués à l'échelle mondiale.
Généralement, la clé doit être un identifiant unique attribué à chaque élément. En dernier recours, vous pouvez utiliser l'index du tableau comme clé.
Exemple:
Refactorisons notre exemple précédent pour inclure les clés :
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'));