रिएक्ट में पैरेंट स्टेट को चाइल्ड कंपोनेंट में एडिट करना

आइए अब हम अपने उत्पादों को इनपुट के माध्यम से एडिट करेंगे। इसके लिए चाइल्ड कंपोनेंट में एक बटन बनाते हैं।

इस बटन पर पहली बार क्लिक करने पर उत्पाद के नाम और कीमत के बजाय उन्हें एडिट करने के लिए इनपुट दिखाई देंगे, और दूसरी बार क्लिक करने पर इनपुट के बजाय फिर से टेक्स्ट दिखाई देंगे।

उत्पादों वाले ऐरे में संशोधन करते हैं, isEdit प्रॉपर्टी जोड़कर (और सरलता के लिए कार्ट वाले काम को हटा देते हैं):

const initProds = [
	{id: id(), name: 'product1', cost: 100, isEdit: false},
	{id: id(), name: 'product2', cost: 200, isEdit: false},
	{id: id(), name: 'product3', cost: 300, isEdit: false},
];

Product कंपोनेंट

उत्पाद में एडिट करने के लिए एक बटन बनाते हैं:

function Product({ id, name, cost, isEdit }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		<button>edit</button>
	</div>;
}

ऐसा करते हैं कि इस बटन पर क्लिक करने पर कोई फंक्शन toggleMode कॉल हो, जो पैरेंट कंपोनेंट से पास किया गया हो:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			edit
		</button>
	</div>;
}

अभी हमारे पास toggleMode का इम्प्लीमेंटेशन नहीं है, लेकिन हम जानते हैं कि यह पैरेंट कंपोनेंट में स्थित होगी, पैरामीटर के रूप में उत्पाद का id लेगी और उत्पाद की isEdit प्रॉपर्टी को विपरीत में बदल देगी।

यह भी करते हैं कि बटन का टेक्स्ट हर बार बदलता रहे:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

आइए अब ऐसा करते हैं कि एडिट मोड में हमारे पास डेटा वाले इनपुट हों, और नॉर्मल मोड में - स्पैन:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: {isEdit ? <input value={name} /> : <span>{name}</span>}
		cost: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

अपने इनपुट्स से onChange इवेंट बांधते हैं, जिसमें कोई पैरेंट फंक्शन editProd कॉल करेंगे:

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		name: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		cost: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

Products कंपोनेंट

आइए अब Products कंपोनेंट में चलते हैं। इसमें toggleMode फंक्शन इम्प्लीमेंट करते हैं:

function toggleMode(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.isEdit = !prod.isEdit;
		}
		
		return prod;
	}));
}

इसमें editProd फंक्शन भी इम्प्लीमेंट करते हैं:

function editProd(id, field, event) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod[field] = event.target.value;
		}
		
		return prod;
	}));
}

उत्पाद वाले टैग में एट्रिब्यूट के रूप में अपने फंक्शन toggleMode और editProd पास करेंगे:

const items = prods.map(prod => {
	return <Product
		key ={prod.id}
		id  ={prod.id}
		name={prod.name}
		cost={prod.cost}
		isEdit={prod.isEdit}
		toggleMode={toggleMode}
		editProd={editProd}
	/>;
});

Products कंपोनेंट का अंतिम कोड इस प्रकार होगा:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function toggleMode(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.isEdit = !prod.isEdit;
			}
			
			return prod;
		}));
	}
	
	function editProd(id, field, event) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod[field] = event.target.value;
			}
			
			return prod;
		}));
	}
	
	const result = prods.map(prod => {
		return <Product
			key ={prod.id}
			id  ={prod.id}
			name={prod.name}
			cost={prod.cost}
			isEdit={prod.isEdit}
			toggleMode={toggleMode}
			editProd={editProd}
		/>;
	});
	
	return <div>
		{result}
	</div>;
}

प्रैक्टिकल टास्क्स

Users और User कंपोनेंट्स के साथ इसी तरह के ऑपरेशन्स करें, जो आपने पिछले पाठों में बनाए थे।