Creación de una ruta para editar datos en React Router

En la lección anterior creamos un formulario para editar en un componente React separado EditProduct.

Ahora escribamos la función del cargador para la nueva ruta justo después de las importaciones y antes de la función EditProduct. Será igual que en product.jsx. A la función se le pasarán los parámetros URL y luego obtendremos el producto por su id:

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

Importemos getProduct desde forStorage.js:

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

Y ahora abriremos nuestro main.jsx e importaremos el componente que creamos EditProduct y el cargador:

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

Luego agreguemos en el array children el objeto de ruta para editar justo después de la ruta del producto:

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

Ahora iniciemos la aplicación, creemos un producto, hagamos clic en él, y luego en el botón de editar y veremos nuestro formulario.

Lo único, aún necesitamos hacer que en los campos del formulario antes de editar se carguen los datos actuales. Para esto importemos en edit.jsx el hook useLoaderData:

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

Y usémoslo para obtener los datos del cargador en la función EditProduct. Agreguémoslo antes del comando return:

const { product } = useLoaderData();

Ahora agreguemos en cada etiqueta input el atributo defaultValue con los valores correspondientes para cada input. Por ejemplo, el primer input ahora se verá así:

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

Para los dos inputs restantes los valores serán respectivamente 'product.cost' y 'product.amount'. Aunque por ahora no tenemos datos en el formulario.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, cree la función loader en edit.jsx para la ruta de edición de datos del estudiante.

Agregue en el array children el objeto de ruta para editar.

Agregue para su función EditStudent el código requerido en la lección.