react typescript pass component as prop code example

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

Example 2: get typescript props of component

type ViewProps = React.ComponentProps<typeof View>
// or
type InputProps = React.ComponentProps<'input'>