Kryerja e Ndryshimeve në Formular në Redux

Në këtë sesion, ne do të përfundojmë punën për shfaqjen e informacionit mbi shitësin në formularin për shtimin e produktit. Për këtë, na mbetet të ndryshojmë pak strukturën e formularit.

Le të hapim aplikacionin tonë të produkteve, dhe në të skedarin NewProductForm.jsx. Le të shtojmë përpara komandës return një fragment kod për strukturën e listës rënëse, në të cilën do të zgjedhim shitësin. Le ta implementojmë atë përmes mënyrës standarde me map:

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

Dhe tani le të bëjmë ndryshime në vetë strukturën. Për këtë, në formular midis paragrafit të parë dhe të dytë (midis blloqeve të strukturës për emrin dhe përshkrimin e produktit) le të fusim një paragraf me strukturën e mëposhtme:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Shitësi:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

Tani mund të nisim aplikacionin tonë. Në formularin për shtim u shfaq një listë me shitës. Le të përpiqemi të plotësojmë formularin me të dhëna, të zgjedhim një prej tyre dhe të klikojmë në butonin e ruajtjes. Tani, nëse shikojmë në Redux DevTools, ne do të shohim ndryshimet - në produktin e ri të shtuar u shfaq një pronë seller me id-në e shitësit të zgjedhur si vlerë. Gjithashtu, në skedën State tani shfahen dy slice products dhe sellers.