React.createElement with typescript error when trying to pass props

Question

I am trying to create dynamic components in react + typescript but I am struggling to correctly type the props on it.

Here is a simpler version of what I'm doing.

interface ComponentProps {
  title: string;
}

interface ArrInterface {
  component: FC<ComponentProps>;
  title: string
}
 
const Arr: ArrInterface = [
  { component: FooComponent, title: "foo"},
  { component: FooComponent, title: "bar"}
];

const FooComponent: FC<ComponentProps> = ({title}) => {
  return <div>{title}</div>
}

const BarComponent: FC = () => {
  return sectionsArr.map((section) => {
    const {component, title} = section;
    return React.createElement(component as FC, { title })
  })
}

this is the error I am getting :

Argument of type '{ title: string; }' is not assignable to parameter of type ' Attributes'.
Object literal may only specify known properties, and 'title' does not exist in type 'Attributes'

it works if I do a ts-ignore on top of that line btw :)

Can someone please help me out on this one? What am I missing here?

Fernando Vidigal · Accepted Answer · 2022-02-11 22:08:04Z

2

I found the solution myself :)

For those ending up with the same issue as I did, it turns out you need to pass the props type to createElement function.

So basically instead of doing

    return React.createElement(component as FC, { title })

this should fix the issue

    return React.createElement<ComponentProps>(component as FC, { title })

answered Feb 11, 2022 at 22:08

Fernando Vidigal

3452 silver badges8 bronze badges

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

Comments

Emma · Accepted Answer · 2022-02-11 22:11:09Z

The signature that TS uses for your React.createElement is

function createElement<P extends {}>(
    type: FunctionComponent<P>,
    props?: Attributes & P | null,
    ...children: ReactNode[]): FunctionComponentElement<P>;

In your React.createElement(component as FC, { title }) call, you're passing a value (component) with the type FC as the argument named type. FC is defined as

type FC<P = {}> = FunctionComponent<P>;

So since you asserted component as FC — without a type argument — TS now uses the default type for the type argument P, namely {}. Now the type of the props argument is Attributes & {}, which is the same as just Attributes. And just like TS tells you, the property 'title' does not exist in type 'Attributes'.

Collectives™ on Stack Overflow

React.createElement with typescript error when trying to pass props

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related