4.6 travailler avec plusieurs états

Dans ce cours, nous allons gérer correctement les saisies du formulaire en utilisant useState pour chaque champ. Nous voulons stocker les trois entrées de l'utilisateur — le titre, le montant et la date — comme des états distincts. Au premier rendu du composant, chaque champ part d'une chaîne vide, ce qui est normal puisque rien n'a encore été saisi.

Trois useState pour trois champs

On déclare un premier état pour le titre avec la déstructuration : const [enteredTitle, setEnteredTitle] = useState('');. Le setter setEnteredTitle est ensuite appelé dans titleChangeHandler à la place du console.log précédent. On répète exactement la même logique pour le montant et la date :

const [enteredTitle, setEnteredTitle] = useState('');
const [enteredAmount, setEnteredAmount] = useState('');
const [enteredDate, setEnteredDate] = useState('');

const titleChangeHandler = (event) => {
  setEnteredTitle(event.target.value);
};

const amountChangeHandler = (event) => {
  setEnteredAmount(event.target.value);
};

const dateChangeHandler = (event) => {
  setEnteredDate(event.target.value);
};

Dans le JSX, on ajoute l'attribut onChange sur chaque input et on lui passe le handler correspondant. Petit rappel sur onChange : c'est un événement qui se déclenche quand l'utilisateur modifie la valeur d'un élément de formulaire (input, select, textarea). React intercepte cet événement et appelle votre fonction handler avec un objet event contenant event.target.value — la nouvelle valeur saisie.

Une fois les trois useState et les trois handlers en place, les erreurs disparaissent et chaque saisie est correctement stockée dans l'état du composant. Voilà comment travailler avec plusieurs états séparés dans un même composant : c'est une approche tout à fait valide. Mais on peut aussi gérer plusieurs valeurs avec un seul useState qui stocke un objet — c'est un concept que nous allons explorer dans le prochain cours.

En résumé

Cette leçon explique comment utiliser plusieurs variables d'état dans un composant React avec useState. On apprend à déclarer plusieurs états (titre, montant, date), créer des handlers onChange pour chacun, et récupérer les valeurs saisies via event.target.value. L'important est de comprendre qu'on peut avoir plusieurs états séparés et indépendants dans un même composant, chacun géré par son propre setState.

Points clés

• Déclarer plusieurs états avec useState dans un même composant sans limitation
• Créer un handler onChange distinct pour chaque champ de formulaire
• Utiliser event.target.value pour capturer les valeurs saisies par l'utilisateur
• Chaque setState met à jour uniquement son état correspondant, indépendamment des autres
• Les états multiples restent séparés et peuvent être gérés de façon autonome

Questions fréquentes

Peut-on vraiment avoir plusieurs useState dans un même composant?

Oui, sans limitation. Vous pouvez appeler useState autant de fois que nécessaire pour gérer différentes données. Chaque appel crée une variable d'état indépendante.

Comment gérer les changements d'un formulaire avec plusieurs inputs?

Créez un handler onChange pour chaque input avec une fonction fléchée qui récupère event.target.value et appelle le setState correspondant. Par exemple : onChange={(e) => setTitle(e.target.value)}

Quel est l'avantage d'avoir plusieurs états au lieu d'un seul objet?

Les états multiples séparés sont simples à mettre à jour individuellement. Cependant, c'est une question importante qui sera explorée plus en détail dans la prochaine leçon sur la gestion d'états complexes.