4.14 Composants contrôlés vs non contrôlés et composants sans état vs avec état

Dans ce cours, nous abordons deux notions importantes pour structurer une application React : composants contrôlés vs non contrôlés et composants avec état (stateful) vs sans état (stateless). Nous allons aussi commencer à mettre en place le filtre des dépenses par année.

Refactor de ExpenseItem en composant sans état

Ouvrez le fichier ExpenseItem.js. Sélectionnez tout le code depuis le const title initial (qui contenait la gestion d'état avec useState) jusqu'à la fin du composant, et supprimez-le. Ne conservez que la déclaration const ExpenseItem = (props) => et son return. Ensuite, dans le JSX, remplacez la simple référence à title par {props.title} pour utiliser directement la valeur reçue en prop.

En faisant cela, ExpenseItem devient un composant sans état (stateless) : il ne gère plus de données internes, il se contente d'afficher ce qu'il reçoit via ses props. C'est aussi un composant présentationnel ou contrôlé, puisque son comportement est entièrement dicté par le parent. À l'inverse, ExpenseForm est un composant stateful (il garde l'état des inputs avec useState).

Création du composant ExpensesFilter

Créez deux nouveaux fichiers dans le dossier Expenses/ : ExpensesFilter.js et ExpensesFilter.css. Je vous fournis le code à recopier — mettez la vidéo en pause pour le saisir. Le JS contient un <select> qui permettra de filtrer les dépenses par année (2019, 2020, 2021, 2022), et le CSS gère le style associé.

Petit aparté sur la méthode filter en JavaScript, que nous utiliserons bientôt : c'est une méthode native des tableaux qui permet de créer un nouveau tableau contenant uniquement les éléments qui satisfont à une condition. Par exemple, expenses.filter(expense => expense.date.getFullYear() === 2021) renvoie uniquement les dépenses de 2021. Maintenant que vous savez ce qu'est filter, on va l'utiliser concrètement dans les prochains cours. On se retrouve pour la suite.