यूआरएल पैरामीटर्स के माध्यम से डेटा लिखना और संपादित करना React Router में

हमारा एप्लिकेशन अब स्टोर से प्रत्येक अलग-अलग उत्पाद के लिए डेटा लोड कर सकता है। इस पाठ में, हम यूआरएल पैरामीटर्स के माध्यम से उत्पाद की जानकारी जोड़ने और उसे संपादित करने को लागू करना शुरू करेंगे।

डेटा दर्ज करने या बदलने के लिए हम फिर से 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 फंक्शन हो, जिसमें छात्र के डेटा को भरने के लिए एक फॉर्म हो।