Pour le moment, notre liste de pokémons est figé dans le code, et les données affichées à l’utilisateur sont toujours identiques. Afin de rendre notre application plus dynamique, nous souhaitons permettre aux utilisateurs d’éditer les données d’un pokémon. Nous allons donc devoir créer un formulaire d’édition pour nos pokémons.
Avant de nous lancer « tête baissée » dans la création de ce formulaire, essayons de spécifier un peu nos besoins. De quoi avons-nous besoin exactement ? Notre futur formulaire doit permettre d’éditer certaines propriétés d’un Pokémon. En effet, nous n’allons pas modifier l’identifiant ou la date de création d’un Pokémon, puisque par définition ces propriétés sont fixes. Il nous reste donc les propriétés suivantes :
Ainsi, notre formulaire comptera quatre champs.
Il sera un composant à part entière, chargé de gérer les données saisies par l’utilisateur, et qui permettra d’éditer un Pokémon. Voici un aperçu de ce que nous souhaitons obtenir :
Pour mettre en place cette interface, je pense que nous avons besoin de deux composants :
Mine de rien, cela fait un peu de travail. Je vous propose de découper ça en deux. D’abord, on implémente une version statique du formulaire, simplement avec du code HTML. Et ensuite, on intègre ce formulaire dans le reste de notre application. Après, nous pourrons voir comment dynamiser ce formulaire grâce à React ! 😉