Snimanje i uređivanje podataka preko URL parametara u React Router-u

Naša aplikacija sada može da učitava podatke za svaki pojedinačni proizvod iz skladišta. U ovoj lekciji ćemo početi da realizujemo dodavanje informacija o proizvodu i njihovo uređivanje preko URL parametara.

Da bismo unosili ili menjali podatke ponovo ćemo koristiti komponentu Form. Za početak, hajde da otvorimo product.jsx i dodamo na kraju šablona dugme za uređivanje podataka proizvoda - posle poslednjeg pasusa (ne zaboravite da importujete Form u fajl):

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

Sada na stranici proizvoda imamo dugme za uređivanje. Zatim ćemo napraviti da kada kliknemo na ovo dugme, budemo prebačeni na stranicu sa formom, gde ćemo moći da unesemo podatke. Za ovo ćemo kreirati još jednu rutu sa products/:productId/edit. Hajde da za ovo napravimo šablon.

Dakle, u folderu routes kreiraćemo novi fajl edit.jsx. Ovdje ćemo imati formu sa poljima name, cost i amount za popunjavanje, kao i dugme za čuvanje. Sve ovo će biti u komponenti EditProduct. Obavezno navedite atribute name, oni će nam trebati u narednim lekcijama:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Name:</span>
				<input placeholder="name" type="text" name="name" />
			</div>
			<div>
				<span>Cost:</span>
				<input placeholder="cost" type="text" name="cost" />
			</div>
			<div>
				<span>Amount:</span>
				<input placeholder="amount" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">save</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale lekcije, dodajte dugme za uređivanje podataka o studentu. Kreirajte fajl edit.jsx za uređivanje sa funkcijom EditStudent, u kojoj će biti forma za popunjavanje podataka o studentu.