Запис и уредување на податоци преку URL параметри во React Router

Нашата апликација сега може да вчитува податоци за секој одделен производ од складиштето. На оваа лекција ќе започнеме да ја имплементираме функцијата за додавање на информации за производот и нивно уредување преку URL параметри.

За внесување или менување на податоци повторно ќе го користиме компонентот Form. За почеток, да ја отвориме product.jsx и да додадеме на крајот од верстката копче за уредување на податоците на производот - после последниот пасус (не заборавајте да го импортирате Form во датотеката):

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

Сега на нашата страница за производот имаме копче за уредување. Следно, ќе направиме така што при кликнување на ова копче да бидеме пренасочени кон страница со форма, каде што ќе можеме да внесуваме податоци. За ова, ќе создадеме уште една рута со products/:productId/edit. Да направиме layout за ова.

Значи, во папката routes ќе создадеме нова датотека edit.jsx. Овде ќе имаме форма со полиња name, cost и amount за пополнување, како и копче за зачувување. Сето ова ќе биде во компонентот EditProduct. Задолжително ќе ги пополниме атрибутите name, тие ќе ни требаат во следните лекции:

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;

Земете ја апликацијата што ја создадовте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, додадете копче за уредување на податоците за студентот. Создадете датотека edit.jsx за уредување со функцијата EditStudent, во која ќе има форма за пополнување на податоци за студентот.