Modification du formulaire dans Redux

Lors de cette session, nous allons terminer le travail sur l'affichage des informations du vendeur dans le formulaire d'ajout de produit. Pour cela, il nous reste à modifier un peu le balisage du formulaire.

Ouvrons notre application de produits, et dans celle-ci le fichier NewProductForm.jsx. Ajoutons avant la commande return un morceau de code pour le balisage de la liste déroulante, dans laquelle nous sélectionnerons le vendeur. Implémentons-la via la méthode standard avec map :

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

Et maintenant, apportons les modifications au balisage lui-même. Pour cela, dans le formulaire, entre le premier et le deuxième paragraphe (entre les blocs de balisage pour le nom et la description du produit), insérons un paragraphe avec le balisage suivant :

<p>
	<label htmlFor="prodSeller">Vendeur :</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Maintenant, nous pouvons lancer notre application. Dans le formulaire d'ajout, une liste déroulante avec les vendeurs est apparue. Essayons de remplir le formulaire avec des données, de sélectionner l'un d'eux et de cliquer sur le bouton de sauvegarde. Maintenant, si nous regardons dans Redux DevTools, nous verrons les changements - dans le nouveau produit ajouté, la propriété seller est apparue avec l'id du vendeur sélectionné comme valeur. De plus, dans l'onglet State, deux slices sont maintenant affichés products et sellers.

Ouvrez votre application d'étudiants. Dans le fichier NewStudentForm.jsx, créez une liste déroulante teachersList avec l'aide de map, dans laquelle figureront les noms complets des enseignants, comme montré dans la leçon.

Apportez des modifications au balisage, en ajoutant un bloc supplémentaire pour l'affichage de la liste déroulante avec les enseignants.

Lancez votre application. Dans le formulaire d'ajout d'étudiant, la liste déroulante avec les enseignants, que vous avez créée dans les tâches précédentes, devrait apparaître.