How to pass a React component as prop with TypeScript

Do you need to pass a React component down as a prop to a child component in TypeScript?

Let’s see how you can do this.

First, if you’re looking to become a strong and elite React developer within just 11 modules, you might want to look into Wes Bos, Advanced React course for just $97.00 (30% off). Wouldn’t it be nice to learn how to create end-to-end applications in React to get a higher paying job? Wes Bos, Advanced React course will make you an elite React developer and will teach you the skillset for you to have the confidence to apply for React positions.

Click here to become a strong and elite React developer: Advanced React course.

Disclaimer: The three React course links are affiliate links where I may receive a small commission for at no cost to you if you choose to purchase a plan from a link on this page. However, these are merely the course I fully recommend when it comes to becoming a React expert.

Best solution

Use React.ReactNode to accept everything.

interface ParentCompProps {
  childComp?: React.ReactNode;
}

const ChildComp: React.FC = () => <h2>This is a child component</h2>

const ParentComp: React.FC<ParentCompProps> = (props) => {
  const { childComp } = props;
  return <div>{childComp}</div>;
};

function App() {
  return (
    <>
      <ParentComp childComp={<ChildComp />} />
      <ParentComp childComp={<h3>Child component 2</h3>} />
      <ParentComp childComp={(
        <div style={{border: '2px solid red'}}>
          <h4>Child component</h4>
          <p>With multiple children</p>
        </div>
      )} />
    </>
  );
}

React.ReactNode is the best choice because it returns set of all possible return values of a component.

Mediocre solutions

interface ChildrenExampleProps {
  // Okay. Doesn't accept functions
  children1: JSX.Element | JSX.Element[];

  // Doesn't allow: <Comp childComp={<ChildComp />} />
  // Only allows: <Comp childComp={ChildComp} />
  // This may be a problem when you only want to pass HTML instead of
  // React component.
  children2: React.ReactType;

  // Better
  children3: React.ReactChild[];
}

Oh wow, you’ve made it this far! If you enjoyed this article perhaps like or retweet the thread on Twitter:

Want to pass React components down as a prop in TypeScript?

Use React.ReactNode type definition. There's other ways, but this is a better solution. pic.twitter.com/6jjADp1Fnr

— ʀᴜʙᴇɴ (@rleija_) June 9, 2020

First, if you’re looking to become a strong and elite React developer within just 11 modules, you might want to look into Wes Bos, Advanced React course for just $97.00 (30% off). Wouldn’t it be nice to learn how to create end-to-end applications in React to get a higher paying job? Wes Bos, Advanced React course will make you an elite React developer and will teach you the skillset for you to have the confidence to apply for React positions.

Click here to become a strong and elite React developer: Advanced React course.

Disclaimer: The three React course links are affiliate links where I may receive a small commission for at no cost to you if you choose to purchase a plan from a link on this page. However, these are merely the course I fully recommend when it comes to becoming a React expert.

I like to tweet about React and post helpful code snippets. Follow me there if you would like some too!