Tietojen tallentaminen ja muokkaaminen URL-parametrien avulla React Routerissa

Sovelluksemme voi nyt ladata tiedot kustakin tuotteesta erikseen tietovarastosta. Tällä oppitunnilla aloitamme toteuttamaan tuotetietojen lisäämisen ja muokkaamisen URL-parametrien avulla.

Jotta voimme tallentaa tai muuttaa tietoja käytämme jälleen komponenttia Form. Aluksi avataan product.jsx ja lisätään lopetusosion jälkeen painike tuotetietojen muokkaamiseen - viimeisen kappaleen jälkeen (älä unohda tuoda Form tiedostoon):

<Form action="edit">
	<button type="submit">muokkaa</button>
</Form>

Nyt tuotesivullamme on muokkauspainike. Seuraavaksi teemme niin, että kun painamme tätä painiketta, meidät siirretään lomakkeen sisältävälle sivulle, jossa voimme syöttää tiedot. Tätä varten luomme toisen reitin polulla products/:productId/edit. Luodaan tätä varten malli.

Joten, routes-kansiossa luomme uuden tiedoston edit.jsx. Tässä on lomake kentillä name, cost ja amount täytettäväksi, sekä tallennuspainike. Kaikki tämä tulee olemaan komponentissa EditProduct. Määritetään ehdottomasti attribuutit name, ne tarvitaan seuraavissa oppitunneissa:

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Nimi:</span>
				<input placeholder="nimi" type="text" name="name" />
			</div>
			<div>
				<span>Hinta:</span>
				<input placeholder="hinta" type="text" name="cost" />
			</div>
			<div>
				<span>Määrä:</span>
				<input placeholder="määrä" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">tallenna</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja ja lisää painike opiskelijatietojen muokkaamiseen. Luo tiedosto edit.jsx muokkausta varten funktiolla EditStudent, jossa on lomake opiskelijatietojen täyttämiseen.