CODEWITHSUNDEEP
reactjstypescript
Jordan Davis
Jordan Davis

Reputation: 398

React / Typescript - React.createElement

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.

error-message

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))

Upvotes: 3

Views: 7927

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42218

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

Upvotes: 9

Related Questions