React Router'da URL Parametreleri ile Veri Yazma ve Düzenleme

Uygulamamız artık her bir ürün için verileri depodan yükleyebiliyor. Bu derste, URL parametreleri ile ürün bilgisi eklemeyi ve düzenlemeyi uygulamaya başlayacağız.

Veri eklemek veya değiştirmek için yine Form bileşenini kullanacağız. Başlangıç olarak, product.jsx dosyasını açalım ve en son paragraftan sonra (Form'u dosyaya içe aktarmayı unutmayın) ürün verilerini düzenlemek için bir buton ekleyelim:

<Form action="edit">
	<button type="submit">düzenle</button>
</Form>

Artık ürün sayfamızda bir düzenleme butonu var. Sonraki adımda, bu butona tıklandığında bizi veri girebileceğimiz bir form sayfasına yönlendirmesini sağlayacağız. Bunun için, products/:productId/edit ile başka bir rota oluşturacağız. Bunun için bir şablon yapalım.

Öyleyse, routes klasöründe yeni bir edit.jsx dosyası oluşturalım. Burada, doldurulacak name, cost ve amount alanları ve bir de kaydetme butonu olan bir formumuz olacak. Tüm bunlar EditProduct bileşeninde olacak. name özniteliklerini mutlaka yazın, sonraki derslerde bize gerekecekler:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>İsim:</span>
				<input placeholder="isim" type="text" name="name" />
			</div>
			<div>
				<span>Maliyet:</span>
				<input placeholder="maliyet" type="text" name="cost" />
			</div>
			<div>
				<span>Miktar:</span>
				<input placeholder="miktar" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">kaydet</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Önceki derslerdeki görevlerde oluşturduğunuz uygulamayı alın. Ders materyallerinden faydalanarak, öğrenci verilerini düzenlemek için bir buton ekleyin. EditStudent işlevine sahip, öğrenci hakkında veri girmek için bir form içeren edit.jsx dosyasını oluşturun.