How to handle props children in react ?
props children in react
💡 In this example, let’s use the analogy of an un-ordered list with some list items.
✅ Visualize this :
<ul>
<li>Buy Milk</li>
<li>Buy Ham</li>
</ul>
✅ React Code:
🎯 List is the parent component , like the <ul></ul>:
const List = ({ title, children }) => {
return (
<div className="list">
<h1>{title}</h1>
<ul>{children}</ul>
</div>
);
};
🎯 Detail represents the child component, like the <li></li>:
const Details = () => {
return (
<div className="details">
<li>Buy milk</li>
<li>Buy Ham</li>
</div>
);
};
🎯 Nesting the components:
function App() {
return (
<div className="App">
<List title="Shopping">
<Details />
</List>
</div>
);
}