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.