Muutosten tekeminen lomakkeeseen Reduxissa

Tällä oppitunnilla saatamme työn päätökseen myyjän tiedon näyttämisen tuotteen lisäyslomakkeessa. Tätä varten meidän on vielä muokattava hieman lomakkeen ulkoasua.

Avataan tuotesovelluksemme, ja siellä tiedosto NewProductForm.jsx. Lisätään return-komennon eteen pieni koodinpätkä pudotusvalikon ulkoasua varten, jossa valitsemme myyjän. Toteutamme sen standarditavalla map:lla:

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

Ja nyt teemme muutoksia itse ulkoasuun. Tätä varten lomakkeeseen ensimmäisen ja toisen kappaleen väliin (tuotteen nimen ja kuvauksen ulkoasualueiden väliin) lisäämme kappaleen, jossa on seuraava ulkoasu:

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

Nyt voimme käynnistää sovelluksemme. Lisäyslomakkeeseen on ilmestynyt luettelo myyjistä. Yritetään täyttää lomake tiedoilla, valita yksi heistä ja klikata tallennuspainiketta. Nyt, jos katsomme Redux DevToolsia, me näemme muutokset - vasta lisätyssä tuotteessa on ilmestynyt ominaisuus seller, jossa on valitun myyjän id arvona. Myös State-välilehdessä näkyy nyt kaksi siivua products ja sellers.

Avaa opiskelijasovelluksesi. Tiedostossa NewStudentForm.jsx luo pudotusvalikko teachersList apuna käyttäen map:ia, jossa on opettajien nimet, kuten oppitunnilla näytetty.

Tee muutoksia ulkoasuun lisäämällä toinen alue pudotusvalikon näyttämistä varten opettajille.

Käynnistä sovelluksesi. Lisäyslomakkeessa opiskelijalle pitäisi ilmestyä pudotusvalikko opettajilla, jotka teit edellisissä tehtävissä.