Reitin luominen tietojen muokkaamiseen React Routerissa

Edellisellä oppitunnilla loimme lomakkeen muokkaamista varten erillisessä React komponentissa EditProduct.

Luodaan nyt loader-funktio uudelle reitille heti importtien jälkeen ja ennen funktiota EditProduct. Se on samanlainen kuin tiedostossa product.jsx. Funktiolle välitetään URL-parametrit ja sitten haemme tuotteen sen id:n perusteella:

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

Importoidaan getProduct tiedostosta forStorage.js:

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

Avataan nyt main.jsx ja importoidaan luomamme komponentti EditProduct ja loader:

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

Lisätään sitten children -taulukkoon reittiolio muokkausta varten heti tuotereitin jälkeen:

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

Käynnistetään nyt sovellus, luodaan tuote, klikataan sitä, ja sitten muokkauspainiketta ja näemme lomakkeemme.

Ainoa, meidän on vielä tehtävä niin, että lomakkeen kentissä muokkausta edeltävästi ovat nykyiset tiedot. Tätä varten importoidaan tiedostoon edit.jsx hook useLoaderData:

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

Ja käytetään sitä saamaan loaderin data funktiossa EditProduct. Lisätään se ennen komentoa return:

const { product } = useLoaderData();

Lisätään nyt jokaiselle input-tagille attribuutti defaultValue vastaavilla arvoilla jokaiselle inputille. Esimerkiksi, ensimmäinen input näyttää nyt tältä:

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

Kahdelle jäljelle jäävälle inputille arvot ovat vastaavasti 'product.cost' ja 'product.amount'. Tosiaan toistaiseksi datasta lomakkeessa meillä ei ole.

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja luodaksesi funktion loader tiedostoon edit.jsx opiskelijan tietojen muokkausreittiä varten.

Lisää children-taulukkoon reittiolio muokkausta varten.

Lisää funktiolle EditStudent oppitunnilla vaadittu koodi.