Zapisywanie i edytowanie danych za pomocą parametrów URL w React Router

Nasza aplikacja może teraz ładować dane dla każdego osobnego produktu z magazynu. W tej lekcji zaczniemy implementować dodawanie informacji o produkcie i jej edytowanie za pomocą parametrów URL.

Aby zapisywać lub zmieniać dane będziemy znowu używać komponentu Form. Na początek otwórzmy product.jsx i dodajmy na końcu wersji przycisk do edytowania danych produktu - po ostatnim akapicie (nie zapomnij zaimportować Form do pliku):

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

Teraz mamy na stronice produktu przycisk edytowania. Następnie zrobimy tak, żeby po naciśnięciu tego przycisku przenosiło nas na stronkę z formularzem, gdzie będziemy mogli wpisywać dane. W tym celu, utworzymy jeszcze jedną trasę z products/:productId/edit. Zróbmy do tego szablon.

A więc, w folderze routes utworzymy nowy plik edit.jsx. Tutaj będziemy mieli formularz z polami name, cost i amount do wypełnienia, a także przyciskiem zapisywania. Wszystko to będzie w komponencie EditProduct. Obowiązkowo wpiszmy atrybuty name, one będą nam potrzebne w następnych lekcjach:

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;

Weź aplikację, stworzoną przez ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, dodaj przycisk edytowania danych studenta. Utwórz plik edit.jsx do edytowania z funkcją EditStudent, w której będzie formularz do wypełnienia danych o studencie.