Typing a dynamic tag in React with TypeScript?

Question

How do I type a dynamic tag in React with TypeScript? Given this code:

interface CompProps {   tag: string; }  const MyComponent: React.FunctionComponent<CompProps> = ({   tag = "div",   children }) => {   const Wrapper = tag;    return <Wrapper>{children}</Wrapper>; }; 

I am getting this error:

Type '{ children: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'. ts(2559)

It seems to me I have to add proper types but I cannot figure out which.

Answer 1

You can pass in a string as a tag name and use that as you have, but you need to type it properly to get type checking to work. tag should be a key of JSX.IntrinsicElements.

interface CompProps {   tag: keyof JSX.IntrinsicElements; }  const MyComponent: React.FunctionComponent<CompProps & React.HTMLAttributes<HTMLOrSVGElement>> = ({   tag: Wrapper = "div",   children,   ...rest }) => {   return <Wrapper {...rest}>{children}</Wrapper>; }; 

Playground Link