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, যেখানে থাকবে ছাত্র সম্পর্কে ডেটা পূরণ করার জন্য একটি ফর্ম।