The children Prop
children, EK, SPECIAL, PROP, hai, JO, AUTOMATICALLY, PASS, HOTI, hai, JAB, EK, COMPONENT, KE, OPENING, aur, CLOSING, TAGS, KE, BEECH, MEIN, KUCH, CONTENT, RAKHA, JAATA, hai — jaise, <Card>content here</Card>, mein, "content here", Card, KE, children PROP, MEIN, MILТА, hai.
children, KISI, BHI, VALID, JSX (TEXT, ELEMENTS, MULTIPLE, ELEMENTS, YA, DUSRE, COMPONENTS) HO, SAKTA, hai — WRAPPER/LAYOUT, COMPONENTS (jaise, Modal, Card, Layout) BANANE, KA, MOST, COMMON, WAY, hai.
function Modal({ children, onClose }) {
return (
<div className="modal-overlay">
<div className="modal-content">
{children}
<button onClick={onClose}>Close</button>
</div>
</div>
);
}
function App() {
return (
<Modal onClose={() => console.log("closed")}>
<h2>Confirm Action</h2>
<p>Are you sure you want to proceed?</p>
</Modal>
);
}- children = SPECIAL prop, JO, OPENING/CLOSING tags, KE, BEECH, KA, CONTENT, CARRY karta hai
- Wrapper/layout components (Modal, Card) banane, ka, MOST, COMMON, way
- Text, elements, ya, DUSRE, components, KUCH, BHI, ho sakta hai
React.cloneElement(child, extraProps), children, ke, ELEMENTS, KO, CLONE, KARKE, EXTRA, PROPS, ADD, KARNE, DETA, hai — ADVANCED, PATTERN, hai, RARELY, USE, HOTA, hai, LEKIN, COMPONENT, LIBRARIES, (jaise, Tabs) MEIN, MILТA, hai.
React.Children.map(children, child =>
React.cloneElement(child, { extraProp: "value" })
);React.Children.count(children) === 0 SE, CHECK, KIYA, JA, SAKTA, hai, ki, children, PROVIDE, HUI, hai, YA, NAHI — EK, COMMON, PATTERN, hai, EMPTY-STATE, UI, DIKHANE, KE, LIYE, AGAR, WRAPPER, COMPONENT, KO, KOI, CONTENT, NAHI, MILA.