Modificarea formularului în Redux

În această lecție, vom finaliza lucrul la afișarea informațiilor despre vânzător în formularul de adăugare a produsului. Pentru aceasta, ne rămâne să modificăm puțin markup-ul formularului.

Să deschidem aplicația noastră cu produsele, iar în ea fișierul NewProductForm.jsx. Să adăugăm, înainte de comanda return, un fragment de cod pentru markup-ul listei drop-down, în care vom selecta vânzătorul. Să îl implementăm prin metoda standard cu map:

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

Și acum să facem modificări în markup-ul însuși. Pentru aceasta, în formular, între primul și al doilea paragraf (între blocurile de markup pentru numele și descrierea produsului), vom insera un paragraf cu următorul markup:

<p>
	<label htmlFor="prodSeller">Vânzător:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Acum putem porni aplicația noastră. În formularul de adăugare, a apărut o listă drop-down cu vânzători. Să încercăm să completăm formularul cu date, să selectăm unul dintre ei și să facem clic pe butonul de salvare. Acum, dacă ne uităm în Redux DevTools, noi vom vedea modificările - în noul produs adăugat, a apărut proprietatea seller cu id-ul vânzătorului selectat ca valoare. De asemenea, în fila State sunt acum afișate două slice-uri products și sellers.

Deschideți aplicația voastră cu studenții. În fișierul NewStudentForm.jsx creați lista drop-down teachersList cu ajutorul map, în care vor fi numele profesorilor, așa cum este arătat în lecție.

Faceți modificări în markup, adăugând încă un bloc pentru afișarea listei drop-down cu profesori.

Porniți aplicația voastră. În formularul pentru adăugarea studentului, ar trebui să apară lista drop-down cu profesori, pe care ați făcut-o în sarcinile anterioare.