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

मान लीजिए कि हमारे पास उत्पादों की एक सरणी दी गई है:

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

मान लीजिए कि यह सरणी Products कंपोनेंट में स्थित है। आइए इन उत्पादों को कंपोनेंट की स्थिति में लिखें:

function Products() {
	const [prods, setProds] = useState(initProds);
}

अब आइए उत्पादों को लूप से पुनरावृत्त करें और उन्हें किसी लेआउट में आउटपुट करें:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

जैसा कि आप देख रहे हैं, हमारे map लूप की सामग्री पर्याप्त जटिल है, खासकर यदि उत्पाद का लेआउट भविष्य में और बढ़ जाता है। ऐसी जटिलता कोड की पठनीयता, समझ और रखरखाव को कठिन बनाती है।

उत्पाद के प्रदर्शन के लिए जिम्मेदार कोड को एक अलग कंपोनेंट में निकालना बेहतर होगा। आइए इसे Product नाम दें। यहाँ हमारे कंपोनेंट का कोड है:

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

आइए अब Products कंपोनेंट के अंदर map लूप में चाइल्ड कंपोनेंट्स Product का उपयोग करें:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

जैसा कि आप देख रहे हैं, अब लूप का कोड सरल हो गया है और समझने में अधिक स्पष्ट हो गया है। इसके अलावा, अब उत्पाद के प्रदर्शन के लिए एक अलग कंपोनेंट जिम्मेदार है, जिसमें हम उत्पादों का लेआउट बना सकते हैं, और फिर संपादित कर सकते हैं।

तकनीकी रूप से, हमारे पास ऐसा होता है कि पैरेंट कंपोनेंट के पास डेटा के साथ स्टेट होती है, और चाइल्ड कंपोनेंट्स को यह डेटा प्रॉप्स के रूप में मिलता है और उन्हें हमारे इच्छित तरीके से प्रदर्शित करते हैं।

Users कंपोनेंट की स्टेट में निम्नलिखित सरणी दी गई है:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

इस सरणी को लूप से पुनरावृत्त करें और सभी उपयोगकर्ताओं को स्क्रीन पर प्रदर्शित करें। उपयोगकर्ता को प्रदर्शित करने के लिए एक अलग कंपोनेंट User बनाएं।