React / Typescript - React.createElement

Question

I have an object which contains a reference to a FunctionalComponent however when I pass that reference into the createElement statement it is throwing a TS error.

Question: why is this complaining? my interface excepts both Component and FunctionalComponent.

Example:

const someFunctionalComponent: React.FC = () => {
  return <div></div>
}
const anotherFunctionalComponent: React.FC = () => {
  return <div></div>

}

const somePages = [someFunctionalComponent, anotherFunctionalComponent];

interface TabPage {
  active: number;
  content: React.Component | React.FC;
}


somePages.forEach(page => React.createElement(page))

Linda Paiste · Accepted Answer · 2021-02-13 01:22:49Z

9

You are getting confused between the component instance and the component class. The name of a class like React.Component represents a the type for an instance of that class. React.createElement is looking for a constructor rather than an instance.

The type for the class constructor is React.ComponentClass. You could use content: React.ComponentClass | React.FC. But there is actually a built-in helper for this union which is React.ComponentType<Props>.

interface TabPage {
  active: number;
  content: React.ComponentType;
}

Typescript Playground Link

answered Feb 13, 2021 at 1:22

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React / Typescript - React.createElement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related