react component as prop typescript code example

Example 1: react tsx component example

import React from 'react';

interface Props {
}

const App: React.FC<Props> = (props) => {
  return (
    <div><div/>
  );
};

export default App;

Example 2: react typescript pass component as prop

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>
      )} />
    </>
  );
}