Proper TypeScript type for creating JSX element from string

Question

I have a component that I want to default to being rendered as an h2. I'd like the consumer to be able to specify a different element if they desire. The code below results in the error:

TS2604 - JSX element type 'ElementType' does not have any construct or call signatures

I think I understand why it fails, TS is expecting to render a React node. For clarity, React is able to render elements referenced as strings as long as the variable begins with a capital letter (this being a JSX requirement). I've done this before successfully in vanilla JS + React, I just don't know how to satisfy TypeScript.

How can I get TypeScript to render this without resorting to elementType?: any

import React, {ReactNode} from 'react'

interface Props {
    children: ReactNode;
    elementType?: string;
}

export default function ({children, elementType: ElementType = 'h2'}: Props): JSX.Element {
    return (
        <ElementType>{children}</ElementType>
    );
}

Related When to use JSX.Element vs ReactNode vs ReactElement? — Liam
– Liam, Commented Dec 1, 2022 at 8:17

Karol Majewski · Accepted Answer · 2020-10-08 12:29:04Z

30

Use keyof JSX.IntrinsicElements:

import * as React from 'react'

interface Props {
  children: React.ReactNode;
  elementType?: keyof JSX.IntrinsicElements;
}

export default function ({ children, elementType: ElementType = 'h2' }: Props): JSX.Element {
  return (
    <ElementType>{children}</ElementType>
  );
}

answered Oct 8, 2020 at 12:29

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

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

1 Comment

flq Over a year ago

best solution if your root element should be an intrinsic type - gives auto-completion and everything.

Zico Deng · Accepted Answer · 2019-06-20 01:32:37Z

21

First, a bit about JSX. It is just a syntactic sugar for React.createElement, which is a JavaScript expression.

With this knowledge in mind, now let's take a look at why TypeScript complains. You define elementType as string, however, when you actually use it, it becomes a JavaScript expression. string type of course doesn't have any construct or call signature.

Now we know the root cause. In React, there is a type called FunctionComponent. As you can guess, it is a function expression, which is what we want. So you can define elementType as string | FunctionComponent. This should make TypeScript happy :)

FYI: the recommended way to define prop typing is by doing this:

const MyComponent: FunctionComponent<Props> = (props) => {}

answered Jun 20, 2019 at 1:32

Zico Deng

7555 silver badges16 bronze badges

1 Comment

callmetwan Over a year ago

This worked like a charm! Thanks for sharing the recommended way to define prop typing, I'm still learning the ins and outs of TS!

Sam Henderson · Accepted Answer · 2022-09-22 16:38:49Z

7

I was making a <Text> component and wanted to narrow the set of possible HTML tags that the developer could pass in to just "text based" elements like span, p, h1, etc.

So I had something like:


// Narrow the tags to p, span, h1, etc
type AS = Extract<keyof JSX.IntrinsicElements, 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5'>;

interface Props {
  children: React.ReactNode;
  as: AS;
  // ... other props here
}

export function Text(props: Props) {  

  // Render the text with the appropriate HTML tag.
  return (
    <HTMLTag as={props.as}>
      {props.children}
    </HTMLTag>
  );
}

interface HTMLTagProps extends HTMLAttributes<HTMLOrSVGElement> {
  as: AS;
}

function HTMLTag({ as: As, ...otherProps }: HTMLTagProps) {
  return <As {...otherProps} />;
}

answered Sep 22, 2022 at 16:38

Sam Henderson

1512 silver badges11 bronze badges

1 Comment

firxworx Over a year ago

Bingo! I wanted to restrict what was an overly permissive prop of type React.ElementType in a refactor pass because it should only accept headings. Using the generic of React.ElementType wasn't right... A quick search brought me to your answer and its exactly what I needed. Thanks for your answer!

Eliav Louski · Accepted Answer · 2021-07-20 13:28:23Z

4

if you just want the type of any jsx element you can use

type jsxType = JSX.IntrinsicElements[keyof JSX.IntrinsicElements]

this will accept any jsx element.

answered Jul 20, 2021 at 13:28

Eliav Louski

5,6125 gold badges39 silver badges77 bronze badges

1 Comment

wamster Over a year ago

Noob here trying to understand...so e.g. that should be type divType = JSX.IntrinsicElements["div"]? Is that correct?

VyvIT · Accepted Answer · 2021-04-02 15:01:29Z

1

What worked for me given the component is defined like this:

interface LabelProps {
        ...
        tag?: React.ElementType | string;
    }

const Label: VFC<LabelProps> = ({
       ...other props...
        tag: Element = 'span',
    }) => (
        <Element>
            {children}
        </Element>
    );

and prop types:

Label.propTypes = {
    ...
    tag: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
};

answered Apr 2, 2021 at 15:01

VyvIT

1,09810 silver badges13 bronze badges

Comments

Saiansh Singh · Accepted Answer · 2022-03-17 21:24:20Z

1

You can use ReactElement:

import type {ReactElement} from 'react';
const HelloWorld = function HelloWorld({ prop: string }): ReactElement {
    return <div>{prop}</div>;
}

answered Mar 17, 2022 at 21:24

Saiansh Singh

7176 silver badges20 bronze badges

Comments

Robert Lemiesz · Accepted Answer · 2019-06-19 21:00:16Z

-2

That is not going to work, you need to use React.createElement(). https://reactjs.org/docs/react-api.html#createelement

Something like this

  import React, {ReactNode} from 'react'

interface Props {
    children: ReactNode,
    elementType?: string,
}

export default function ({children, elementType: ElementType = 'h2'}: Props): JSX.Element {

    return React.createElement(elementType, {}, children); 
}

answered Jun 19, 2019 at 21:00

Robert Lemiesz

1,1762 gold badges19 silver badges31 bronze badges

1 Comment

callmetwan Over a year ago

With respect, this does work. What I posted is just syntactic sugar for your solution. This isn't an issue with React, it is an issue with TS.

Collectives™ on Stack Overflow

Proper TypeScript type for creating JSX element from string

7 Answers 7

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related