Εισαγωγή αλλαγών στη φόρμα στο Redux

Σε αυτό το μάθημα θα ολοκληρώσουμε την εργασία για την εμφάνιση πληροφοριών του πωλητή στη φόρμα προσθήκης προϊόντος. Για αυτό μας απομένει να αλλάξουμε ελαφρώς τη σύνταξη της φόρμας.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο NewProductForm.jsx. Ας προσθέσουμε πριν από την εντολή return ένα κομμάτι κώδικα για τη σύνταξη της αναδυόμενης λίστας, στην οποία θα επιλέγουμε τον πωλητή. Θα την υλοποιήσουμε μέσω της τυπικής μεθόδου με map:

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

Και τώρα ας εισάγουμε αλλαγές στην ίδια τη σύνταξη. Για αυτό, στη φόρμα μεταξύ της πρώτης και της δεύτερης παραγράφου (μεταξύ των μπλοκ σύνταξης για το όνομα και την περιγραφή του προϊόντος) θα εισάγουμε μια παράγραφο με την ακόλουθη σύνταξη:

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

Τώρα μπορούμε να εκκινήσουμε την εφαρμογή μας. Στη φόρμα προσθήκης εμφανίστηκε μια λίστα με τους πωλητές. Ας προσπαθήσουμε να συμπληρώσουμε τη φόρμα με δεδομένα, να επιλέξουμε έναν από αυτούς και να κλικάρουμε στο κουμπί αποθήκευσης. Τώρα, αν κοιτάξουμε στα Redux DevTools, θα δούμε αλλαγές - στο νέο προστεθέν προϊόν θα εμφανιστεί η ιδιότητα seller με το id του επιλεγμένου πωλητή ως τιμή. Επίσης, στην καρτέλα State τώρα εμφανίζονται δύο τεμάχια products και sellers.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στο αρχείο NewStudentForm.jsx δημιουργήστε μια αναδυόμενη λίστα teachersList με βοήθεια της map, στην οποία θα υπάρχουν τα ΑΜ των διδασκόντων, όπως φαίνεται στο μάθημα.

Εισάγετε αλλαγές στη σύνταξη, προσθέτοντας ένα ακόμη μπλοκ για την εμφάνιση της αναδυόμενης λίστας με τους διδάσκοντες.

Εκκινήστε την εφαρμογή σας. Στη φόρμα προσθήκης μαθητή θα πρέπει να εμφανιστεί μια αναδυόμενη λίστα με διδάσκοντες, που φτιάξατε στις προηγούμενες ασκήσεις.