Grabación y edición de datos mediante parámetros URL en React Router

Nuestra aplicación ahora puede cargar datos para cada producto individual desde el almacenamiento. En esta lección, comenzaremos a implementar la adición de información del producto y su edición mediante parámetros URL.

Para registrar o modificar datos volveremos a utilizar el componente Form. Para empezar, abramos product.jsx y agreguemos al final del marcado un botón para editar los datos del producto - después del último párrafo (no olvide importar Form en el archivo):

<Form action="edit">
	<button type="submit">edit</button>
</Form>

Ahora tenemos un botón de edición en la página de producto. A continuación, haremos que al hacer clic en este botón nos redirija a una página con un formulario donde podamos ingresar datos. Para ello, crearemos otra ruta con products/:productId/edit. Vamos a crear un diseño para esto.

Entonces, en la carpeta routes crearemos un nuevo archivo edit.jsx. Aquí tendremos un formulario con campos name, cost y amount para completar, así como un botón de guardar. Todo esto estará en el componente EditProduct. Asegúrese de escribir los atributos name, ellos los necesitaremos en las próximas lecciones:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Name:</span>
				<input placeholder="name" type="text" name="name" />
			</div>
			<div>
				<span>Cost:</span>
				<input placeholder="cost" type="text" name="cost" />
			</div>
			<div>
				<span>Amount:</span>
				<input placeholder="amount" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">save</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Tome la aplicación que creó en las tareas de lecciones anteriores. Utilizando los materiales de la lección, agregue un botón de edición de datos del estudiante. Cree el archivo edit.jsx para editar con la función EditStudent, que contendrá un formulario para completar los datos del estudiante.