Creazione di una rotta per la modifica dei dati in React Router

Nella lezione precedente abbiamo creato un modulo per la modifica in un componente React separato EditProduct.

Ora scriviamo la funzione loader per la nuova rotta subito dopo l'import e prima della funzione EditProduct. Sarà uguale a quella in product.jsx. Alla funzione verranno passati i parametri URL e successivamente otterremo il prodotto tramite il suo id:

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

Importiamo getProduct da forStorage.js:

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

E ora apriamo il nostro main.jsx e importiamo il componente che abbiamo creato EditProduct e il loader:

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

Poi aggiungiamo all'array children l'oggetto della rotta per la modifica subito dopo la rotta per il prodotto:

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

Ora avviamo l'applicazione, creiamo un prodotto, clicchiamoci sopra, e poi sul pulsante di modifica e vedremo il nostro modulo.

L'unica cosa, dobbiamo ancora fare in modo che nei campi del modulo prima della modifica vengano caricati i dati attuali. Per questo importiamo in edit.jsx l'hook useLoaderData:

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

E applichiamolo per ottenere i dati dal loader nella funzione EditProduct. Aggiungiamolo prima del comando return:

const { product } = useLoaderData();

Ora aggiungiamo ad ogni tag input l'attributo defaultValue con i rispettivi valori per ogni input. Ad esempio, il primo input ora apparirà così:

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

Per i due input rimanenti i valori saranno rispettivamente 'product.cost' e 'product.amount'. Anche se per ora non abbiamo dati nel modulo.

Prendete l'applicazione creata da voi nei compiti delle lezioni precedenti. Utilizzando il materiale della lezione, create la funzione loader in edit.jsx per la rotta di modifica dei dati dello studente.

Aggiungete all'array children l'oggetto della rotta per la modifica.

Aggiungete per la vostra funzione EditStudent il codice richiesto nella lezione.