Coming from class-based OOP (the JavaScript Classes and OOP lesson), reusing behavior across components might suggest inheritance — one component extending another. React deliberately doesn't work that way; composition, building components out of other components, is the idiomatic approach for basically everything.
The children prop from the Props lesson is the main composition tool — a wrapper component that doesn't need to know anything about what's inside it:
function Card({ children }) {
return <div className="card">{children}</div>;
}
function App() {
return (
<Card>
<h2>Title</h2>
<p>Any content at all can go here.</p>
</Card>
);
}Card works identically whether it wraps a paragraph, a form, or another component entirely — it never needed to know.
When a component needs more than one distinct content area, passing JSX through regular props (not just children) covers it — any prop can hold JSX, not only strings and numbers:
function SplitPanel({ left, right }) {
return (
<div style={{ display: 'flex' }}>
<div>{left}</div>
<div>{right}</div>
</div>
);
}
function App() {
return (
<SplitPanel
left={<Sidebar />}
right={<MainContent />}
/>
);
}A more specific component can be built by wrapping a more general one, instead of extending it:
function Dialog({ title, children }) {
return (
<div className="dialog">
<h2>{title}</h2>
{children}
</div>
);
}
function WelcomeDialog() {
return (
<Dialog title="Welcome!">
<p>Thanks for signing up.</p>
</Dialog>
);
}Prefer composition over a class-style hierarchy
If you find yourself wanting a base component with several near-identical variants, composing a specific component around a general one (as above) is almost always simpler to reason about in React than a class hierarchy would be — there's no chain of parent behavior to trace through, just components calling components.