Modifica del modulo in Redux

In questa lezione completeremo il lavoro sulla visualizzazione delle informazioni sul venditore nel modulo per l'aggiunta del prodotto. Per fare ciò, ci rimane da modificare leggermente il markup del modulo.

Apriamo la nostra applicazione di prodotti, e in essa il file NewProductForm.jsx. Aggiungiamo prima del comando return un frammento di codice per il markup del menu a tendina, in cui selezioneremo il venditore. Implementiamolo tramite il metodo standard con map:

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

E ora apportiamo modifiche al markup stesso. Per fare ciò, nel modulo, tra il primo e il secondo paragrafo (tra i blocchi di markup per il nome e la descrizione del prodotto) inseriamo un paragrafo con il seguente markup:

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

Ora possiamo avviare la nostra applicazione. Nel modulo di aggiunta è apparso un elenco a tendina con i venditori. Proviamo a compilare il modulo con i dati, selezionare uno di loro e fare clic sul pulsante di salvataggio. Ora, se guardiamo in Redux DevTools, vedremo delle modifiche - nel nuovo prodotto aggiunto è apparsa una proprietà seller con l'id del venditore selezionato come valore. Inoltre, nella scheda State ora vengono visualizzati due slice products e sellers.

Apri la tua applicazione degli studenti. Nel file NewStudentForm.jsx crea un menu a tendina teachersList utilizzando map, che conterrà i nomi completi degli insegnanti, come mostrato nella lezione.

Apporta modifiche al markup, aggiungendo un altro blocco per visualizzare il menu a tendina con gli insegnanti.

Avvia la tua applicazione. Nel modulo per l'aggiunta di uno studente dovrebbe apparire un menu a tendina con gli insegnanti, che hai creato nei compiti precedenti.