सूचियाँ प्रस्तुत करना

Arrays से डेटा रेंडर करना

मान लीजिए कि आपके पास content की एक सूची है।

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

उन सूची आइटम्स के बीच केवल एक अंतर होता है: उनकी contents, यानी उनका डेटा। जब आप इंटरफेस बना रहे होते हैं, तो अक्सर आपको एक ही कंपोनेंट के कई उदाहरणों को अलग-अलग डेटा के साथ दिखाने की आवश्यकता होती है, जैसे कि टिप्पणियों की सूची या प्रोफ़ाइल images की गैलरी। ऐसे मामलों में, आप उस डेटा को JavaScript ऑब्जेक्ट्स और arrays में संग्रहीत कर सकते हैं और फिर उनमें से कंपोनेंट्स की सूची रेंडर करने के लिए map() और filter() जैसे तरीकों का उपयोग कर सकते हैं।

यहां एक छोटा उदाहरण दिया गया है कि कैसे एक array से आइटम्स की सूची बनाई जा सकती है:

1. डेटा को एक array में स्थानांतरित करें:

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

2. Map people के सदस्यों को एक नए JSX nodes के array, listItems, में परिवर्तित करें:

const listItems = people.map(person => <li>{person}</li>);

3. Return अपने कंपोनेंट में listItems को <ul> में wrapped करें:

return <ul>{listItems}</ul>;

यहां परिणाम दिया गया है:

ध्यान दें कि ऊपर दिए गए sandbox में एक कंसोल error दिखाई दे रही है:

आप इस error को ठीक करना बाद में सीखेंगे इस पेज पर। इससे पहले, आइए आपके डेटा को कुछ संरचना दें।

आइटम्स के arrays को फ़िल्टर करना

यह डेटा और भी अधिक structured किया जा सकता है।

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

मान लीजिए आप केवल उन लोगों को दिखाना चाहते हैं जिनका पेशा 'chemist' है। आप JavaScript के filter() method का उपयोग करके केवल उन्हीं लोगों को प्राप्त कर सकते हैं। यह method एक array को पास करता है और एक “test” (एक function जो true या false लौटाता है) के माध्यम से उन आइटम्स को फ़िल्टर करता है और केवल उन आइटम्स को एक नए array में लौटाता है जिन्होंने test पास किया (जो true लौटाते हैं)।

आप केवल उन आइटम्स को चाहते हैं जिनका profession 'chemist' है। इसके लिए “test” function इस प्रकार दिखेगा: (person) => person.profession === 'chemist'। इसे एक साथ जोड़ने का तरीका यहां है:

1. एक नई array chemists Create करें जो केवल “chemist” वाले लोगों को दिखाती हो, filter() method का उपयोग करके person.profession === 'chemist':

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

2. अब map करें chemists array पर:

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       known for {person.accomplishment}
     </p>
  </li>
);

3. अब, अपने कंपोनेंट से listItems को return करें :

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // Implicit return!
);

const listItems = chemists.map(person => { // Curly brace
  return <li>...</li>;
});

सूची आइटम्स को क्रम में रखना key

ध्यान दें कि ऊपर दिए गए सभी सैंडबॉक्स कंसोल में एक त्रुटि दिखा रहे हैं:

आपको प्रत्येक array आइटम को एक key देना होगा — एक स्ट्रिंग या नंबर जो उसे उस array के अन्य आइटम्स में से विशिष्ट रूप से पहचान सके।

<li key={person.id}>...</li>

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

Rather than generating keys on the fly, you should include them in your data:

Keys React को यह बताती हैं कि कौन सा array आइटम प्रत्येक कंपोनेंट से संबंधित है, ताकि React बाद में उन्हें मेल कर सके। यह महत्वपूर्ण हो जाता है यदि आपके array आइटम्स को स्थानांतरित (जैसे कि सॉर्टिंग के कारण), जोड़ा, या हटाया जा सकता है। एक अच्छे तरीके से चुनी गई key React को यह अनुमान लगाने में मदद करती है कि क्या हुआ है, और DOM वृक्ष में सही अपडेट्स कराती है।

key को तुरंत जनरेट करने के बजाय, आपको उन्हें अपने डेटा में शामिल करना चाहिए।

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

अपना key कहां से प्राप्त करें

डेटा के विभिन्न स्रोत विभिन्न प्रकार की keys प्रदान करते हैं:

• डेटा डेटाबेस से: यदि आपका डेटा डेटाबेस से आ रहा है, तो आप डेटाबेस keys/IDs का उपयोग कर सकते हैं, जो स्वभाव से अद्वितीय होती हैं।

• स्थानीय रूप से उत्पन्न डेटा: यदि आपका डेटा स्थानीय रूप से उत्पन्न और संग्रहित किया गया है (जैसे कि नोट-लेने वाले ऐप में नोट्स), तो आइटम बनाते समय एक बढ़ता हुआ काउंटर, crypto.randomUUID() या uuid जैसे पैकेज का उपयोग करें।

keys के नियम

• keys को सिबलिंग्स के बीच अद्वितीय होना चाहिए। हालांकि, विभिन्न arrays में JSX नोड्स के लिए एक ही keys का उपयोग करना ठीक है।
• keys को बदलना नहीं चाहिए वरना उनका उद्देश्य ही समाप्त हो जाएगा! उन्हें रेंडर करते समय उत्पन्न न करें।

React को keys की आवश्यकता क्यों है?

कल्पना करें कि आपके डेस्कटॉप पर फाइलों के नाम नहीं होते। इसके बजाय, आप उन्हें उनके क्रम के अनुसार संदर्भित करते — पहली फाइल, दूसरी फाइल, और इसी तरह। आप इसके आदी हो सकते थे, लेकिन जैसे ही आप एक फाइल को डिलीट करते, यह उलझन में डाल सकता था। दूसरी फाइल पहली फाइल बन जाती, तीसरी फाइल दूसरी फाइल बन जाती, और इसी तरह।

एक फोल्डर में फाइल नाम और array में JSX keys का उद्देश्य समान होता है। ये हमें एक आइटम को उसके सिबलिंग्स के बीच अद्वितीय रूप से पहचानने की अनुमति देते हैं। एक अच्छे तरीके से चुनी गई key अधिक जानकारी देती है, न केवल array में स्थिति के बारे में। यहां तक कि यदि स्थिति पुनर्व्यवस्थित होने के कारण बदलती है, तो key React को आइटम को उसकी पूरी जीवनकाल के दौरान पहचानने में मदद करती है।