Tworzenie trasy do edycji danych w React Router

W poprzedniej lekcji stworzyliśmy formularz do edycji w oddzielnym komponencie React EditProduct.

Stwórzmy teraz funkcję loadera dla nowej trasy zaraz po importach i przed funkcją EditProduct. Będzie ona taka sama, jak w product.jsx. Do funkcji będą przekazywane parametry URL a następnie będziemy pobierać produkt po jego id:

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

Zaimportujmy getProduct z forStorage.js:

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

A teraz otworzymy nasz main.jsx i zaimportujemy stworzony przez nas komponent EditProduct i loader:

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

Następnie dodajmy do tablicy children obiekt trasy do edycji zaraz po trasie dla produktu:

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

Teraz uruchommy aplikację, stwórzmy produkt, kliknijmy na niego, a następnie na przycisk edycji i zobaczymy nasz formularzyk.

Jedyne, co jeszcze musimy zrobić, to sprawić, aby w polach formularza przed edycją były załadowane aktualne dane. W tym celu zaimportujemy w edit.jsx hook useLoaderData:

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

I zastosujemy go do pobrania danych z loadera w funkcji EditProduct. Dodajmy go przed komendą return:

const { product } = useLoaderData();

Teraz dodajmy do każdego tagu input atrybut defaultValue z odpowiednimi wartościami dla każdego inputa. Na przykład, pierwszy input będzie teraz wyglądał tak:

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

Dla dwóch pozostałych inputów wartości będą odpowiednio 'product.cost' i 'product.amount'. Prawda, że na razie danych w formularzu nie mamy.

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, stwórz funkcję loader w edit.jsx dla trasy edycji danych studenta.

Dodaj do tablicy children obiekt trasy do edycji.

Dodaj dla Twojej funkcji EditStudent wymagany w lekcji kod.