Wprowadzanie zmian w formularzu w Redux

Na tym zajęciu zakończymy pracę nad wyświetlaniem informacji o sprzedawcy w formularzu dodawania produktu. W tym celu pozostało nam nieznacznie zmienić układ formularza.

Otwórzmy naszą aplikację z produktami, a w niej plik NewProductForm.jsx. Dodajmy przed poleceniem return fragment kodu dla układu rozwijanej listy, w której będziemy wybierać sprzedawcę. Zaimplementujmy go za pomocą standardowej metody z map:

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

Teraz wprowadźmy zmiany w samym układzie. W tym celu w formularzu między pierwszym a drugim akapitem (między blokami układu dla nazwy i opisu produktu) wstawmy akapit z następującym układem:

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

Teraz możemy uruchomić naszą aplikację. W formularzu dodawania pojawiła się nam lista ze sprzedawcami. Spróbujmy wypełnić formularz danymi, wybrać jednego z nich i kliknąć przycisk zapisu. Teraz, jeśli zajrzymy do Redux DevTools, zobaczymy zmiany - w nowo dodanym produkcie pojawiła się nam właściwość seller z id wybranego sprzedawcy jako wartość. Również w zakładce State wyświetlane są teraz dwa slice'y products i sellers.

Otwórz twoją aplikację ze studentami. W pliku NewStudentForm.jsx utwórz rozwijaną listę teachersList z użyciem map, w której będą imiona i nazwiska nauczycieli, jak pokazano w lekcji.

Wprowadź zmiany w układzie, dodając kolejny blok do wyświetlania rozwijanej listy z nauczycielami.

Uruchom twoją aplikację. W formularzu dodawania studenta powinna pojawić się rozwijana lista z nauczycielami, którą tworzyłeś w poprzednich zadaniach.