Унос и уређивање података преко URL параметара у React Router-у

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

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

<Form action="edit">
	<button type="submit">уреди</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>Назив:</span>
				<input placeholder="назив" type="text" name="name" />
			</div>
			<div>
				<span>Цена:</span>
				<input placeholder="цена" type="text" name="cost" />
			</div>
			<div>
				<span>Количина:</span>
				<input placeholder="количина" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">сачувај</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Узмите апликацију коју сте креирали у задацима за претходне лекције. Користећи материјале лекције, додајте дугме за уређивање података студента. Креирајте фајл edit.jsx за уређивање са функцијом EditStudent, у којој ће бити форма за попуњавање података о студенту.