Using React Children and Props Together
In React, components can accept both the special children prop (whatever you place between
opening and closing tags) and any number of custom props (like id, title, etc.).
This allows you to build flexible wrapper or layout components.
The children prop is always passed automatically, but other props must be explicitly listed
when you use your component. Inside your component, you can combine them however you need.
function ChildrenProps() {
return (
<>
<h1>How To Use Children</h1>
{/* Passing in both an id and children */}
<ParentContainer id="33">
<ChildObject />
<ChildObject />
<ChildObject />
<ChildObject />
<ChildObject />
</ParentContainer>
</>
);
}
function ParentContainer({ children, id }) {
return (
<div>
<h2>I am a parent (id: {id})</h2>
<div>
{children} {/* children appear here */}
</div>
</div>
);
}
function ChildObject() {
return (
<h2 style={{ border: "1px solid blue", padding: "10px", width: "200px", backgroundColor: "#EEE" }}>
I am a child
</h2>
);
}
export default ChildrenProps;
Key Points to Remember
childrenis a special prop that contains whatever you wrap inside your component tags.- Other props (like
id) are just normal props you must define yourself. - You can combine them to make parent components flexible and reusable.