React Lists, Keys & Conditional Rendering

📋 Lists aur Dynamic Rendering

React mein hum arrays ko UI elements mein convert karte hain. Jab bhi aapko multiple similar items dikhane hain (like products, users, posts), tab aap lists use karte hain.

🔍 Map vs forEach in Rendering

✅ map() - CORRECT

Returns naya array

JSX elements return karta hai

Rendering ke liye perfect

❌ forEach() - WRONG

Returns undefined

Kuch return nahi karta

Rendering ke liye use nahi hota

// ✅ Correct Way - map() use karo
const items = ['Apple', 'Banana', 'Orange'];
return (
  <ul>
    {items.map(item => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

// ❌ Wrong Way - forEach() kuch return nahi karta
items.forEach(item => (
  <li>{item}</li>  // Ye render nahi hoga!
));
                

🎮 Interactive Demo: List Rendering

🔑 Keys: React ki Identity System

Keys React ko batate hain ki kaunsa element kaunsa hai. Ye ek unique identifier hai jo React ko help karta hai efficiently re-render karne mein.

Why Keys Matter?

Without Keys: React ko pata nahi chalta ki list mein kya change hua, toh wo puri list ko re-render kar deta hai.

With Keys: React sirf changed elements ko hi update karta hai, making it super fast! 🚀

⚠️ Index as Key - Common Mistake

🎮 Demo: Index as Key Problem

Niche waale buttons se dekho ki index as key kyun problem create karta hai:

// ❌ WRONG - Index as key (avoid this!)
items.map((item, index) => (
  <li key={index}>{item}</li>
));

// ✅ CORRECT - Unique ID as key
items.map(item => (
  <li key={item.id}>{item.name}</li>
));

// ⚠️ OK - Last resort (jab item unique aur stable ho)
items.map(item => (
  <li key={item}>{item}</li>
));
                

❌ Index as Key Problem

Jab list reorder hoti hai:

Keys change ho jati hain
React confused ho jata hai
Wrong elements update hote hain
State mess ho jata hai

✅ Unique Key Benefits

Stable keys ke saath:

Keys same rehti hain
React correctly track karta hai
Sahi elements update hote hain
Performance optimal rehti hai

⚠️ Common Mistakes aur Best Practices

🐛 Mistake #1: Missing Keys

Problem: Keys na dena React ko warning deta hai aur performance issues create karta hai.

// ❌ Wrong - No key provided
{items.map(item => <li>{item}</li>)}

// ✅ Correct - Key provided
{items.map(item => <li key={item.id}>{item}</li>)}
                    

🐛 Mistake #2: Non-Unique Keys

Problem: Same key multiple elements ko dena React ko confuse kar deta hai.

// ❌ Wrong - Duplicate keys
{items.map(item => <li key="item">{item}</li>)}

// ✅ Correct - Unique keys
{items.map(item => <li key={item.id}>{item}</li>)}
                    

🐛 Mistake #3: 0 in Conditional Rendering

Problem: Agar count 0 hai, toh count && <div>{count}</div> screen pe "0" display karega!

// ❌ Wrong - Will render "0" on screen
{count && <div>Items: {count}</div>}

// ✅ Correct - Explicit boolean check
{count > 0 && <div>Items: {count}</div>}
{Boolean(count) && <div>Items: {count}</div>}
                    

🎮 Demo: The "0" Problem

Item count ko 0 karo aur dekho kya hota hai:

✅ Best Practices Summary

✅ DO THIS

Unique, stable IDs use karo
Database IDs prefer karo
Explicit boolean checks
Keys ko props mein pass mat karo
Early returns for readability

❌ DON'T DO THIS

Index as key (unless static list)
Random values as keys
Missing keys
Duplicate keys
Math.random() as key

🎭 Conditional Rendering Patterns

React mein hum conditions ke basis par different UI render karte hain. Iske multiple tarike hain!

1️⃣ If/Else Statement

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign in.</h1>;
  }
}
                

2️⃣ Ternary Operator (? :)

return (
  <div>
    {isLoggedIn ? (
      <h1>Welcome back!</h1>
    ) : (
      <h1>Please sign in.</h1>
    )}
  </div>
);
                

3️⃣ Logical && (Short-circuiting)

return (
  <div>
    {isLoggedIn && <h1>Welcome back!</h1>}
    {messages.length > 0 && (
      <p>You have {messages.length} messages</p>
    )}
  </div>
);
                

4️⃣ Early Return

function UserProfile({ user }) {
  if (!user) {
    return <p>Loading...</p>;
  }
  
  if (user.banned) {
    return <p>Account suspended</p>;
  }
  
  return <div>{user.name}</div>;
}
                

🎮 Interactive Demo: Conditional Rendering Patterns

Login Status

Logged Out

Messages

0 messages

Premium User

Free Plan

🎯 React Lists, Keys & Conditional Rendering