diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index c82739a6a..fc01073ca 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,14 +1,14 @@
---
id: lists-and-keys
-title: Lists and Keys
+title: Listes et clés
permalink: docs/lists-and-keys.html
prev: conditional-rendering.html
next: forms.html
---
-First, let's review how you transform lists in JavaScript.
+Tout d'abord, voyons comment transformer des listes en JavaScript.
-Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
+Dans le code suivant, on utilise la méthode [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) pour prendre un tableau de nombres et doubler leurs valeurs. On affecte le nouveau tableau retourné par `map()` à une variable `doubled` et on l'affiche dans la console :
```javascript{2}
const numbers = [1, 2, 3, 4, 5];
@@ -16,15 +16,15 @@ const doubled = numbers.map((number) => number * 2);
console.log(doubled);
```
-This code logs `[2, 4, 6, 8, 10]` to the console.
+Ce code affiche `[2, 4, 6, 8, 10]` dans la console.
-In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
+Avec React, transformer un tableau en une liste d'[éléments](/docs/rendering-elements.html) est presque identique.
-### Rendering Multiple Components {#rendering-multiple-components}
+### Afficher plusieurs composants {#rendering-multiple-components}
-You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
+On peut construire des collections d'éléments et [les inclure dans du JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) en utilisant les accolades `{}`.
-Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `` element for each item. Finally, we assign the resulting array of elements to `listItems`:
+Ci-dessous, on itère sur le tableau de nombres en utilisant la méthode JavaScript [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map). On retourne un élément `` pour chaque entrée du tableau. Enfin, on affecte le tableau d'éléments résultant à `listItems` :
```javascript{2-4}
const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
);
```
-We include the entire `listItems` array inside a `` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+On inclut tout le tableau `listItems` dans un élément ``, et [on l'affiche dans le DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom) :
```javascript{2}
ReactDOM.render(
@@ -42,15 +42,15 @@ ReactDOM.render(
);
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
-This code displays a bullet list of numbers between 1 and 5.
+Ce code affiche une liste à puces de nombres entre 1 et 5.
-### Basic List Component {#basic-list-component}
+### Composant basique de liste {#basic-list-component}
-Usually you would render lists inside a [component](/docs/components-and-props.html).
+Généralement, on souhaite afficher une liste au sein d’un [composant](/docs/components-and-props.html).
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs an unordered list of elements.
+On peut transformer l’exemple précédent pour en faire un composant qui accepte un tableau de nombres et produit une liste non ordonnée d'éléments.
```javascript{3-5,7,13}
function NumberList(props) {
@@ -70,9 +70,9 @@ ReactDOM.render(
);
```
-When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
+En exécutant ce code, vous obtiendrez un avertissement disant qu'une clé devrait être fournie pour les éléments d'une liste. Une « clé » *(key, NdT)*, est un attribut spécial que vous devez inclure quand vous créez une liste d'éléments. Nous verrons pourquoi c'est important dans la prochaine section.
-Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
+Assignons une `key` aux éléments de notre liste dans `numbers.map()` afin de corriger le problème de clés manquantes.
```javascript{4}
function NumberList(props) {
@@ -94,11 +94,11 @@ ReactDOM.render(
);
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
-## Keys {#keys}
+## Les clés {#keys}
-Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
+Les clés aident React à identifier quels éléments d'une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau afin d’apporter aux éléments une identité stable :
```js{3}
const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +109,8 @@ const listItems = numbers.map((number) =>
);
```
-The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
+Le meilleur moyen de choisir une clé est d'utiliser quelque chose qui identifie de façon unique un élément d'une liste parmi ses voisins. Le plus souvent on utilise l'ID de notre donnée comme clé :
+
```js{2}
const todoItems = todos.map((todo) =>
@@ -119,34 +120,34 @@ const todoItems = todos.map((todo) =>
);
```
-When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
+Quand vous n'avez pas d'ID stable pour les éléments affichés, vous pouvez utiliser l'index de l'élément en dernier recours :
```js{2,3}
const todoItems = todos.map((todo, index) =>
- // Only do this if items have no stable IDs
+ // Ne faites ceci que si les éléments n'ont pas d'ID stable
-
{todo.text}
);
```
-We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+Nous vous recommandons de ne pas utiliser l'index comme clé si l'ordre des éléments est susceptible de changer. Ça peut avoir un effet négatif sur les performances, et causer des problèmes avec l'état du composant. Vous pouvez lire l'article de Robin Pokorny pour une [explication en profondeur de l'impact négatif de l'utilisation de l'index comme clé](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) (en anglais). Si vous choisissez de ne pas donner explicitement de clé aux éléments d'une liste, React utilisera l’index par défaut.
-Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
+Si vous voulez en apprendre davantage, consultez cette [explication en profondeur de la raison pour laquelle les clés sont nécessaires](/docs/reconciliation.html#recursing-on-children).
-### Extracting Components with Keys {#extracting-components-with-keys}
+### Extraire des composants avec des clés {#extracting-components-with-keys}
-Keys only make sense in the context of the surrounding array.
+Les clés n'ont une signification que dans le contexte du tableau qui les entoure.
-For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `` elements in the array rather than on the `- ` element in the `ListItem` itself.
+Par exemple, si on [extrait](/docs/components-and-props.html#extracting-components) un composant `ListItem`, on doit garder la clé sur l'élément `` dans le tableau, et non sur l'élément `
- ` dans le composant `ListItem` lui-même.
-**Example: Incorrect Key Usage**
+**Exemple : utilisation erronée des clés**
```javascript{4,5,14,15}
function ListItem(props) {
const value = props.value;
return (
- // Wrong! There is no need to specify the key here:
+ // Erroné ! Pas la peine de spécifier la clé ici :
-
{value}
@@ -156,7 +157,7 @@ function ListItem(props) {
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
- // Wrong! The key should have been specified here:
+ // Erroné : la clé doit être spécifiée ici :
);
return (
@@ -173,18 +174,18 @@ ReactDOM.render(
);
```
-**Example: Correct Key Usage**
+**Exemple : utilisation correcte des clés**
```javascript{2,3,9,10}
function ListItem(props) {
- // Correct! There is no need to specify the key here:
+ // Correct ! Pas la peine de spécifier la clé ici :
return - {props.value}
;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
- // Correct! Key should be specified inside the array.
+ // Correct ! La clé doit être spécifiée dans le tableau.
);
@@ -202,13 +203,13 @@ ReactDOM.render(
);
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
-A good rule of thumb is that elements inside the `map()` call need keys.
+Gardez en tête cette règle simple : chaque élément à l'intérieur d'un appel à `map()` a besoin d'une clé.
-### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+### Les clés n’ont besoin d’être uniques qu’au sein de la liste {#keys-must-only-be-unique-among-siblings}
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+Les clés utilisées dans un tableau doivent être uniques parmi leurs voisins. Cependant, elles n'ont pas besoin d'être globalement uniques. On peut utiliser les mêmes clés dans des tableaux différents :
```js{2,5,11,12,19,21}
function Blog(props) {
@@ -237,8 +238,8 @@ function Blog(props) {
}
const posts = [
- {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
- {id: 2, title: 'Installation', content: 'You can install React from npm.'}
+ {id: 1, title: 'Bonjour, monde', content: 'Bienvenue sur la doc de React !'},
+ {id: 2, title: 'Installation', content: 'Vous pouvez installer React depuis npm.'}
];
ReactDOM.render(
,
@@ -246,9 +247,9 @@ ReactDOM.render(
);
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
-Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
+Les clés servent d'indicateur à React mais ne sont pas passées à vos composants. Si vous avez besoin de la même valeur dans de votre composant, passez-la dans une prop avec un nom différent :
```js{3,4}
const content = posts.map((post) =>
@@ -259,11 +260,11 @@ const content = posts.map((post) =>
);
```
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
+Dans l'exemple ci-dessus, le composant `Post` peut accéder à `props.id`, mais pas à `props.key`.
-### Embedding map() in JSX {#embedding-map-in-jsx}
+### Intégrer `map()` dans du JSX {#embedding-map-in-jsx}
-In the examples above we declared a separate `listItems` variable and included it in JSX:
+Dans les exemples précédents, nous déclarions séparément la variable `listItems` pour ensuite l’inclure dans le JSX :
```js{3-6}
function NumberList(props) {
@@ -280,7 +281,7 @@ function NumberList(props) {
}
```
-JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
+JSX permet [d'intégrer des expressions quelconques](/docs/introducing-jsx.html#embedding-expressions-in-jsx) entre accolades. Nous pouvons donc utiliser `map()` directement dans notre code JSX :
```js{5-8}
function NumberList(props) {
@@ -296,6 +297,6 @@ function NumberList(props) {
}
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
-Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+Ça rend parfois le code plus lisible, mais il faut éviter d’en abuser. Comme avec JavaScript, c'est vous qui décidez quand ça vaut le coup d'extraire l'expression dans une variable pour plus de lisibilité. Gardez en tête que si le corps de `map()` est trop profond ou trop riche, c’est sans doute le signe qu’il faudrait [extraire un composant](/docs/components-and-props.html#extracting-components).