Gegevens vastleggen en bewerken via URL-parameters in React Router

Onze applicatie kan nu gegevens voor elk afzonderlijk product laden uit de opslag. In deze les beginnen we met het implementeren van het toevoegen van productinformatie en het bewerken ervan via URL-parameters.

Om gegevens vast te leggen of te wijzigen, gebruiken we opnieuw de component Form. Laten we eerst product.jsx openen en aan het einde van de markup een knop toevoegen voor het bewerken van de productgegevens - na de laatste alinea (vergeet niet Form te importeren in het bestand):

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

Nu hebben we een bewerkingsknop op de productpagina. Vervolgens zorgen we ervoor dat wanneer we op deze knop klikken, we worden doorgestuurd naar een pagina met een formulier waar we gegevens kunnen invoeren. Hiervoor maken we nog een route aan met products/:productId/edit. Laten we hier een layout voor maken.

Dus, in de map routes maken we een nieuw bestand edit.jsx. Hierin komt een formulier met de velden name, cost en amount om in te vullen, evenals een opslaanknop. Dit alles komt in de component EditProduct. Zorg ervoor dat je de attributen name invult, we hebben ze nodig in de volgende lessen:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Naam:</span>
				<input placeholder="naam" type="text" name="name" />
			</div>
			<div>
				<span>Kosten:</span>
				<input placeholder="kosten" type="text" name="cost" />
			</div>
			<div>
				<span>Hoeveelheid:</span>
				<input placeholder="hoeveelheid" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">opslaan</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Neem de applicatie die je hebt gemaakt in de opdrachten bij eerdere lessen. Gebruikmakend van de lesmaterialen, voeg een knop toe voor het bewerken van studentgegevens. Maak een bestand edit.jsx aan voor bewerking met de functie EditStudent, waarin een formulier komt voor het invullen van gegevens over de student.