How to pass component constructor in React props?

Issue

How to pass component constructor in React props?

I'm a beginner for React. So below example may make it clear what I am trying to achieve.

Example:

PorkComponent:

const PorkComponent = ({ children, variant }: PorkComponentProps) => {
  return (
    <motion.div>
      ...
    </motion.div>
  );
};

DuckComponent:

const DuckComponent = ({ children, variant }: DuckComponentProps) => {
  return (
    <motion.div>
      ...
    </motion.div>
  );
};

The Lunch component will contains PorkComponent or DuckComponent Based on LunchProps.meatType.

type LunchProps = {
  meatType: React.ComponentType;
};

const Lunch = (props: LunchProps) => {
 return (
    <props.meatType> // Here it will return PorkComponent or DuckComponent based on what props.meatType.
  );

}

Sure I can use something like:

const Lunch = (props: LunchProps) => {
 return (
    if (props.isPork) {
      < PorkComponent >
    } else(props.isDuck) {
      < DuckComponent >
    }
    ....
  );

}

But I don't want to have multiple IFELSE check in Lunch component. Instead, I want the caller to specify the "meat type", like <Lunch meatType= PorkComponent>.

Solution

You can simply write :

const Lunch = (props: LunchProps) => <props.meatType />;

<Lunch meatType={DuckComponent} />

Here is an example on stackblitz

Answered By - Olivier Boissé