How to create a container component

#javascript #typescript #nextjs #tutorial

Need to create a component that can take in other components/elements as children or just a component that wraps your app? Well you're in luck, here's a short tutorial on how to do it.

A really straight to the point answer is having your component have a prop with a type JSX.Element

const Card = ({ children }: { children: JSX.Element }) => {
  return (
     <div>
       { children }
     </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Card>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
      </Card>
    </div>
  );
}