Création d'une route pour l'édition de données dans React Router

Dans la leçon précédente, nous avons créé un formulaire d'édition dans un composant React séparé EditProduct.

Écrivons maintenant la fonction de loader pour la nouvelle route, juste après les imports et avant la fonction EditProduct. Elle sera identique à celle dans product.jsx. Les paramètres d'URL seront passés à la fonction et nous récupérerons ensuite le produit par son id :

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

Importons getProduct depuis forStorage.js :

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

Maintenant, ouvrons notre main.jsx et importons le composant que nous avons créé EditProduct et le loader :

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

Ensuite, ajoutons dans le tableau children l'objet de route pour l'édition, immédiatement après la route du produit :

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

Lançons maintenant l'application, créons un produit, cliquons dessus, puis sur le bouton d'édition et nous verrons notre formulaire.

La seule chose qu'il nous reste à faire est de nous assurer que les champs du formulaire contiennent les données actuelles avant l'édition. Pour cela, importons dans edit.jsx le hook useLoaderData :

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

Et utilisons-le pour récupérer les données du loader dans la fonction EditProduct. Ajoutons-le avant la commande return :

const { product } = useLoaderData();

Maintenant, ajoutons à chaque balise input l'attribut defaultValue avec les valeurs correspondantes pour chaque input. Par exemple, le premier input ressemblera maintenant à ceci :

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

Pour les deux inputs restants, les valeurs seront respectivement 'product.cost' et 'product.amount'. Bien que pour l'instant nous n'ayons pas de données dans le formulaire.

Prenez l'application que vous avez créée dans les missions des leçons précédentes. En utilisant le contenu de la leçon, créez la fonction loader dans edit.jsx pour la route d'édition des données de l'étudiant.

Ajoutez dans le tableau children l'objet de route pour l'édition.

Ajoutez à votre fonction EditStudent le code demandé dans la leçon.