Wijzigingen aanbrengen in het formulier in Redux

In deze les ronden we het werk af om de verkoperinformatie weer te geven in het formulier voor het toevoegen van een product. Hiervoor hoeven we slechts de opmaak van het formulier lichtelijk aan te passen.

Laten we onze productenapplicatie openen, en daarin het bestand NewProductForm.jsx. Laten we vóór de return-opdracht een stukje code toevoegen voor de opmaak van de dropdownlijst, waarin we een verkoper kunnen selecteren. We implementeren dit via de standaard methode met map:

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

En nu brengen we wijzigingen aan in de opmaak zelf. Hiervoor voegen we in het formulier tussen de eerste en tweede alinea (tussen de opmaakblokken voor de productnaam en -beschrijving) een alinea in met de volgende opmaak:

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

Nu kunnen we onze applicatie starten. In het toevoegformulier is er een lijst met verkopers verschenen. Laten we proberen het formulier in te vullen met gegevens, een van hen te selecteren en te klikken op de opslaanknop. Nu, als we in de Redux DevTools kijken, zien we de wijzigingen - in het nieuw toegevoegde product is er een eigenschap seller verschenen met de id van de geselecteerde verkoper als waarde. Ook worden in het tabblad State nu twee slices weergegeven: products en sellers.

Open je studentenapplicatie. Maak in het bestand NewStudentForm.jsx een dropdownlijst teachersList aan met behulp van map, waarin de volledige namen van de docenten staan, zoals getoond in de les.

Breng wijzigingen aan in de opmaak door nog een blok toe te voegen voor het weergeven van de dropdownlijst met docenten.

Start je applicatie. In het formulier voor het toevoegen van een student zou er een dropdownlijst met docenten moeten verschijnen, die je in de vorige opdrachten hebt gemaakt.