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

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

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

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

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

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

jsxfunction 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 नाम दें। यहाँ हमारे कंपोनेंट का कोड है:

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

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

jsxfunction 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>;
}

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

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

jsxconst 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},
];