Writing and editing data by URL parameters in React Router

Our application can now load data for each individual product from the store. In this lesson, we will begin implementing adding product information and editing it using URL parameters.

To enter or change data, we will use the Form component again. First, let's open product.jsx and add a button to edit product data at the end of the layout - after the last paragraph (don't forget to import Form into the file):

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

Now we have an edit button on the product page. Next, we will make it so that when we click on this button, we are transferred to a page with a form where we can enter data. To do this, we will create another route with products/:productId/edit. Let's make a layout for this.

So, in the routes folder we will create a new file edit.jsx. Here we will have a form with fields name, cost and amount to fill in, as well as a save button. All this will be in the EditProduct component. Be sure to register the name attributes, we will need them in the following lessons:

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;

Take the app you created in the previous lessons. Using the lesson materials, add a button to edit student data. Create a file edit.jsx for editing with the function EditStudent, which will contain a form for filling in student data.