Criando uma Rota para Editar Dados no React Router

Na lição anterior, criamos um formulário de edição em um componente React separado EditProduct.

Agora vamos escrever a função loader para a nova rota, logo após as importações e antes da função EditProduct. Ela será igual à do product.jsx. Os parâmetros de URL serão passados para a função e, em seguida, obteremos o produto pelo seu id:

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

Vamos importar getProduct do forStorage.js:

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

Agora, vamos abrir nosso main.jsx e importar o componente que criamos, EditProduct, e o loader:

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

Em seguida, adicionaremos ao array children um objeto de rota para edição, logo após a rota do produto:

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

Agora, vamos iniciar o aplicativo, criar um produto, clicar nele e depois no botão de edição para ver nosso formulário.

Única coisa, ainda precisamos fazer com que os campos do formulário sejam pré-preenchidos com os dados atuais antes da edição. Para isso, importaremos no edit.jsx o hook useLoaderData:

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

E o aplicaremos para obter os dados do loader na função EditProduct. Vamos adicioná-lo antes do comando return:

const { product } = useLoaderData();

Agora, adicionaremos a cada tag de input o atributo defaultValue com os valores correspondentes para cada input. Por exemplo, o primeiro input ficará assim:

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

Para os dois inputs restantes, os valores serão respectivamente 'product.cost' e 'product.amount'. No entanto, por enquanto, ainda não temos os dados no formulário.

Pegue o aplicativo que você criou nas tarefas das lições anteriores. Usando os materiais da lição, crie a função loader em edit.jsx para a rota de edição de dados do estudante.

Adicione ao array children um objeto de rota para edição.

Adicione à sua função EditStudent o código solicitado na lição.