Registrering og redigering av data ved hjelp av URL-parametere i React Router

Applikasjonen vår kan nå laste data for hvert enkelt produkt fra lagringsstedet. I denne leksjonen skal vi begynne å implementere tilføyelse av produktinformasjon og redigering av den ved hjelp av URL-parametere.

For å registrere eller endre data skal vi bruke komponenten Form igjen. La oss først åpne product.jsx og legge til en liten knapp for redigering av data til produktet på slutten av koden - etter siste avsnitt (ikke glem å importere Form i filen):

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

Nå har vi en redigeringsknapp på produktsiden. Deretter skal vi sørge for at når vi klikker på denne knappen, blir vi videresendt til en side med et skjema der vi kan legge inn data. For å gjøre dette skal vi opprette en rute til med products/:productId/edit. La oss lage en mal for dette.

Så, i mappen routes oppretter vi en ny fil edit.jsx. Her skal vi ha et skjema med feltene name, cost og amount for utfylling, samt en lagringsknapp. Alt dette skal være i komponenten EditProduct. Husk å skrive inn attributtene name, de vil vi trenge i de neste leksjonene:

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>Kostnad:</span>
				<input placeholder="kostnad" type="text" name="cost" />
			</div>
			<div>
				<span>Antall:</span>
				<input placeholder="antall" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">lagre</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen og legg til en knapp for redigering av studentdata. Opprett filen edit.jsx for redigering med funksjonen EditStudent, der det skal være et skjema for å fylle ut data om studenten.