Optagelse og redigering af data via URL-parametre i React Router

Vores applikation kan nu hente data for hvert enkelt produkt fra lageret. I denne lektion vil vi begynde at implementere tilføjelse af produktinformation og redigering af den via URL-parametre.

For at tilføje eller ændre data vil vi igen bruge komponenten Form. Til at starte med, lad os åbne product.jsx og tilføje en knap til redigering af produktdata i slutningen af koden - efter det sidste afsnit (glem ikke at importere Form i filen):

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

Nu har vi en redigeringsknap på vores produktside. Dernæst vil vi sørge for, at ved at klikke på denne knap bliver vi viderestillet til en side med en formular, hvor vi kan indtaste data. For at gøre dette vil vi oprette en ny rute med products/:productId/edit. Lad os oprette en skabelon til dette.

Så, i mappen routes opretter vi en ny fil edit.jsx. Her vil vi have en formular med felterne name, cost og amount til udfyldelse, samt en gem-knap. Alt dette vil være i komponenten EditProduct. Husk at angive attributterne name, de vil vi få brug for i de næste lektioner:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Navn:</span>
				<input placeholder="navn" type="text" name="name" />
			</div>
			<div>
				<span>Pris:</span>
				<input placeholder="pris" type="text" name="cost" />
			</div>
			<div>
				<span>Antal:</span>
				<input placeholder="antal" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">gem</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Tag den applikation, du har oprettet i opgaverne til de foregående lektioner. Brug materialet fra lektionen til at tilføje en knap til redigering af studerendes data. Opret filen edit.jsx til redigering med funktionen EditStudent, som vil indeholde en formular til udfyldning af data om den studerende.