Gjennomføring av endringer i skjema i Redux

På denne timen vil vi fullføre arbeidet med å vise informasjon om selger i skjemaet for å legge til produkt. For å gjøre dette trenger vi bare å endre skjemaets oppsett litt.

La oss åpne produktapplikasjonen vår, og i den filen NewProductForm.jsx. La oss før return-kommandoen legge til en liten kodebit for oppsettet av nedtrekkslisten, der vi skal velge selger. Vi implementerer den gjennom standardmetoden med map:

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

Og nå skal vi gjøre endringer i selve oppsettet. For å gjøre dette, i skjemaet mellom den første og andre avsnittet (mellom oppsettsblokkene for produktnavn og produktbeskrivelse) setter vi inn et avsnitt med følgende oppsett:

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

Nå kan vi starte applikasjonen vår. I skjemaet for tilføyelse dukket det opp en liste med selgere. La oss prøve å fylle ut skjemaet med data, velge en av dem og klikke på lagre-knappen. Nå, hvis vi ser i Redux DevTools, vil vi se endringene - i det nylig tilføyde produktet dukket det opp en egenskap seller med id-en til den valgte selgeren som verdi. Også i State-fanen vises nå to skiver products og sellers.

Åpne studentapplikasjonen din. I filen NewStudentForm.jsx opprett en nedtrekksliste teachersList med hjelp av map, der det vil være fullt navn på lærere, som vist i timen.

Gjør endringer i oppsettet ved å legge til en ny blokk for visning av nedtrekkslisten med lærere.

Start applikasjonen din. I skjemaet for å legge til student skal det dukke opp en nedtrekksliste med lærere, som du lagde i de foregående oppgavene.