Dynamically render string as html component in TypeScript

Question

How can I type a prop that accepts ComponentType or a string?

Suppose the following code.

interface MyComponentProps {
    Component: React.ComponentType
}
const MyComponent: React.FC<PropsWithChildren<MyComponentProps>> = ({Component}) => {
    return <Component>{children}</Component>
}
<MyComponent
    Component="span"
/>

Trying this in TS gives the following error.

Type 'string' is not assignable to type 'ComponentType<{}> | undefined'.

How can I dynamically render a native html tag using JSX?

Donovan Hiland · Accepted Answer · 2022-11-30 19:48:09Z

3

In terms of react and javascript, your code is correct. The issue here is the types. The string "span" is not a ComponentType. The type you want for Component is React.ElementType. If you check out the definition of ElementType it includes all of the intrinsic jsx elements or a component type.

You can come to this conclusion by yourself by rendering a <span></span> and hovering over or clicking through to the span keyword. You'll see the type is JSX.IntrinsicElements.span. If you click through you can see that IntrinsicElements includes all the html elements. I did a search to see where that type was being used which led me to the React.ElementType

Updated code:

interface MyComponentProps {
    Component: React.ElementType
}
const MyComponent: React.FC<PropsWithChildren<MyComponentProps>> = ({Component}) => {
    return <Component>{children}</Component>
}
<MyComponent
    Component="span"
/>

Side note: React.FC might not be the best approach anymore. Instead it seems to be preferable to just assign a type to the props directly:

const MyComponent = ({Component}: PropsWithChildren<MyComponentProps>) => {
    return <Component>{children}</Component>
}

More on that here if you're interested: https://github.com/facebook/create-react-app/pull/8177

answered Nov 30, 2022 at 19:48

Donovan Hiland

1,51912 silver badges18 bronze badges

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

1 Comment

Moritz Roessler Over a year ago

Thanks a lot for outlining how to reach your conclusion. This is the answer I was hoping for. Very insightful read about React.FC. Much appreciated.

Collectives™ on Stack Overflow

Dynamically render string as html component in TypeScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related