2. Présentation du formulaire d’édition

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 :

• Le nom du Pokémon.
• Les points de vie du Pokémon.
• Les dégâts du Pokémon.
• Les types du Pokémon.

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 :

• Un composant de page : Il se nommera PokemonEdit et représentera la page d’édition d’un pokémon. La page sera accessible depuis l’url /pokemons/edit/<pokemon_id>.
• Un composant contrôlé : C’est le composant qui permettra d’implémenter le formulaire d’édition en tant que tel. Nous l’appelons « composant contrôlé » car il s’agit d’un composant dédié pour la mise en place du formulaire, mais bien sûr, d’un point technique, il s’agit d’un formulaire React comme les autres.

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 ! 😉