Lists Render करना और key Prop
Keys name tags जैसे हैं जो React उपयोग करता है यह याद रखने के लिए कि कौन सा list item कौन है, list बदलने के बाद भी।
In this page:
Syntax
<ul>
{array.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>map() से एक Array Render करना
Array.prototype.map() data के एक array को JSX elements के एक array में बदलने का standard तरीका है, हर item के लिए एक।
Note:
map() को हर item के लिए एक value return करना चाहिए -- (एक curly-brace arrow function body में) return भूल जाना undefined items की एक list produce करता है।
Warning:
किसी ऐसी चीज़ पर .map() call करना जो असल में एक array नहीं है (एक single object जैसा) render time पर एक TypeError throw करता है।
उदाहरण: Rendering an Array with map()
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<FruitList />);
</script>
</body>
</html>key Prop क्यों मायने रखता है
एक list से rendered हर item को एक unique key prop चाहिए ताकि React re-renders के across track कर सके कि कौन सा item कौन है, correctly right DOM elements को reuse, reorder, या remove करते हुए।
Note:
जब भी data से एक उपलब्ध हो तो key के रूप में data खुद से एक stable, unique value (जैसे एक id) उपयोग करें।
Warning:
React एक console warning log करता है जब एक list बिना keys के render होती है, और list re-ordering तब item state को surprising तरीकों से visually मिला सकता है।
उदाहरण: Why the key Prop Matters
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function UserList() {
const users = [{id: 1, name: 'Ravi'}, {id: 2, name: 'Meera'}];
return (
<ul>
{users.map((u) => <li key={u.id}>{u.name}</li>)}
</ul>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserList />);
</script>
</body>
</html>Array Index को key के रूप में Use करना Risky क्यों है
key के रूप में array index उपयोग करना (key={index}) एक static, कभी reorder न होने वाली list के लिए काम करता है, लेकिन item identity तोड़ देता है अगर items insert, remove, या reorder हों, क्योंकि index अब वही underlying item से correspond नहीं करता।
Note:
जब भी list order बदल सकती है array index के बजाय अपने data से एक असली id prefer करें।
Warning:
एक reorderable/filterable list पर index को key के रूप में उपयोग करना list items के अंदर input fields को reordering के बाद wrong value दिखाने का कारण बन सकता है, क्योंकि React key/position से match करता है, item की असली identity से नहीं।
उदाहरण: Why Array Index as key Is Risky
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function IndexKeyWarning() {
const items = ['A', 'B', 'C'];
return (
<ul>
{items.map((item, index) => <li key={index}>{item} (index key -- risky if reordered)</li>)}
</ul>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<IndexKeyWarning />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- जब list reorder, add, या filter हो सकती है तो array index को key के रूप में उपयोग करना -- यह bugs का कारण बनता है।
- बिल्कुल key न जोड़ना, जो एक console warning trigger करता है और update performance को नुकसान पहुंचाता है।
- Non-unique keys उपयोग करना जो sibling elements के across repeat होती हैं।
चैप्टर सारांश
.map()एक array से elements की list render करने का standard तरीका है।- Rendered list में हर item को एक unique
keyprop चाहिए। - Keys React को efficiently identify करने में help करती हैं कि कौन से items बदले, जोड़े गए, या हटाए गए।
- आपके data से एक stable, unique ID array index से एक बेहतर key है।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- keys एक React reconciliation concept हैं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: