React me children Prop Kaise Use Karein (Composition in Hindi)

React me children prop ka sahi istemal kaise karein? Composition pattern ke zariye reusable components banane ka ye step-by-step master guide dekhein.

Jab hum ReactJS mein kaam karte hain, toh aksar humein aise layouts banane padte hain jahan ek "wrapper" ya "container" component baar-baar use hota hai. Kya aap bhi har baar naya component likh kar waqt barbaad kar rahe hain? Aaj hum seekhenge ki kaise children prop ki madad se hum apne components ko flexible aur modular bana sakte hain.

React me children prop kya hai?

Dosto, children prop React ka ek built-in feature hai. Jab aap kisi component ko opening aur closing tag ke beech kuch likhte hain, toh React use automatically children naam ke prop mein daal deta hai. Ye wahi mechanism hai jisse <div>Hello</div> kaam karta hai. React components mein, hum isi pattern ko use karke parent se child ko content pass karte hain.

Children prop ka use kaise karein (Step-by-Step)

Chaliye ek real-world example dekhte hain. Maan lijiye humein ek Card component banana hai jo har jagah dikhega, lekin uska andar ka content alag hoga.

1. Step 1: Card Component banayein - Isme hum props.children ko render karenge.
2. Step 2: Parent Component se wrap karein - Content ko tags ke beech mein pass karenge.

// Card.js
const Card = ({ children }) => {
  return (
    <div className="card-wrapper" style={{ border: '1px solid #ccc', padding: '20px' }}>
      <h2>Main Card Title</h2>
      <div className="card-content">
        {children}
      </div>
    </div>
  );
};

// App.js
const App = () => {
  return (
    <Card>
      <p>Ye mera dynamic content hai jo Card ke andar jayega!</p>
      <button>Click Me</button>
    </Card>
  );
};

Children prop vs Prop Drilling mein kya antar hai?

Bahut se beginners ko lagta hai ki React components mein data pass karne ka sirf ek hi tarika hai. Lekin children prop actually Prop Drilling se bachne ka ek behtareen tareeka hai. Jab aap components ko compose karte hain, toh aapko data ko props ke zariye har level par nahi bhejna padta.

Common Errors aur Debugging Tips

Dosto, kaam karte waqt kuch baaton ka dhyan rakhein:

• Missing Children: Agar aap props.children ko component mein render karna bhool gaye, toh content screen par nahi dikhega.
• Type Checking: Agar aap TypeScript use kar rahe hain, toh children ka type React.ReactNode define karna na bhoolein.
• Performance: Excessive composition se bachne ki zaroorat nahi hai, React iske liye highly optimized hai.

Agar aapko koi error dikhe, toh check karein ki kya aapne component ko sahi se wrap kiya hai ya nahi. Official React Docs par iske baare mein aur bhi gehrai se jankari di gayi hai.

Toh dosto, humne aaj kya seekha?

Aaj humne samjha ki children prop kaise hamare React components ko zyada saaf (clean) aur reusable banata hai. Composition ka istemal karke hum apne MERN Stack projects ko better organize kar sakte hain. Agli baar jab aap koi layout banayein, toh children ka use zaroor karein!