Записване и редактиране на данни чрез URL параметри в React Router

Нашето приложение вече може да зарежда данни за всеки отделен продукт от хранилището. В този урок ще започнем да реализираме добавяне на информация за продукта и нейното редактиране чрез URL параметри.

За да въвеждаме или променяме данни ние отново ще използваме компонента Form. Като начало нека отворим product.jsx и добавим в края на верстката бутонче за редактиране на данните на продукта - след последния параграф (не забравяйте да импортирате Form във файла):

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

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

И така, в папката 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, в която ще има форма за попълване на данни за студента.