Zápis a editace dat pomocí URL parametrů v React Router

Naše aplikace nyní umí načítat data pro každý jednotlivý produkt z úložiště. V této lekci začneme implementovat přidávání informací o produktu a jejich editaci pomocí URL parametrů.

Pro zápis nebo změnu dat budeme znovu používat komponentu Form. Pro začátek otevřeme product.jsx a přidáme na konec verze tlačítko pro editaci dat produktu - za posledním odstavcem (nezapomeňte importovat Form do souboru):

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

Nyní máme na stránce produktu tlačítko pro editaci. Dále uděláme to, aby nás po kliknutí na toto tlačítko přesměrovalo na stránku s formulářem, kde budeme moci zadávat data. K tomu vytvoříme další route s products/:productId/edit. Pojďme pro to vytvořit šablonu.

Takže, ve složce routes vytvoříme nový soubor edit.jsx. Zde budeme mít formulář s polemi name, cost a amount pro vyplnění, a také tlačítkem pro uložení. Všechno to bude v komponentě EditProduct. Nezapomeňte vyplnit atributy name, budou se nám hodit v následujících lekcích:

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;

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Použijte materiály lekce a přidejte tlačítko pro editaci dat studenta. Vytvořte soubor edit.jsx pro editaci s funkcí EditStudent, ve které bude formulář pro vyplnění dat o studentovi.