Een route aanmaken voor het bewerken van gegevens in React Router

In de vorige les hebben we een formulier voor bewerking gemaakt in een aparte React component EditProduct.

Laten we nu de laadfunctie schrijven voor de nieuwe route, direct na de import en vóór de functie EditProduct. Deze zal hetzelfde zijn als in product.jsx. Aan de functie zullen URL-parameters worden doorgegeven en vervolgens zullen we het product ophalen aan de hand van zijn id:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

Importeren we getProduct uit forStorage.js:

import { getProduct } from '../forStorage';

En nu openen we onze main.jsx en importeren we de door ons gemaakte component EditProduct en de laadfunctie:

import EditProduct, { loader as editProductLoader } from './routes/edit';

Vervolgens voegen we in de array children een route-object voor bewerking toe, direct na de route voor het product:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
	{
		path: 'products/:productId/edit',
		element: <EditProduct />,
		loader: editProductLoader,
	},
],

Laten we nu de applicatie starten, een product aanmaken, erop klikken, en dan op de bewerkknop en we zullen ons formuliertje zien.

Het enige is, we moeten er ook voor zorgen dat in de formuliervelden vóór het bewerken de huidige gegevens zijn geladen. Hiervoor importeren we in edit.jsx de hook useLoaderData:

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

En passen we deze toe om gegevens op te halen uit de laadfunctie in de functie EditProduct. We voegen deze toe vóór de opdracht return:

const { product } = useLoaderData();

Laten we nu in elke input-tag het attribuut defaultValue toevoegen met de bijbehorende waarden voor elke input. Bijvoorbeeld, de eerste input ziet er nu zo uit:

<input
	placeholder="name"
	type="text"
	name="name"
	defaultValue={product.name}
/>

Voor de twee overgebleven inputs zullen de waarden respectievelijk 'product.cost' en 'product.amount' zijn. Alleen hebben we op dit moment nog geen gegevens in het formulier.

Neem de applicatie die je hebt gemaakt in de opdrachten bij de vorige lessen. Gebruikmakend van de lesmaterialen, maak je de functie loader in edit.jsx voor de route voor het bewerken van studentgegevens.

Voeg in de array children een object toe voor de bewerkingsroute.

Voeg voor je functie EditStudent de vereiste code uit de les toe.