Proper TypeScript Type for Creating JSX Element from String with React and Intrinsic Elements

A Proper TypeScript Type for Creating JSX Elements from Strings

When working with TypeScript and React, it’s common to encounter situations where you need to dynamically create JSX elements from strings. One such scenario is when you have a component that should default to rendering as an h2 tag, but allows the consumer to specify a different element if desired.

Let’s take a look at the code that attempts to achieve this:

import React, { ReactNode } from 'react';

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

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

The Error: JSX element type ‘ElementType’ does not have any construct or call signatures

When attempting to use this code, you may encounter an error similar to this:

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

This error occurs because TypeScript expects the JSX element type to be a React node, but in this case, it is a string. While React can render elements referenced as strings, TypeScript needs more explicit type information to satisfy its requirements.

Solution 1: Using keyof JSX.IntrinsicElements

To resolve this issue, you can use the keyof JSX.IntrinsicElements utility type, which represents all the possible valid HTML element names in JSX:

import * as React from 'react';

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

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

By specifying the prop elementType as keyof JSX.IntrinsicElements, you ensure that only valid HTML elements can be passed as props.

Example Usage:

<MyComponent elementType="div"><span>Hello, World!</span></MyComponent>

Solution 2: Using React FunctionComponent

Another approach is to use the FunctionComponent type provided by React:

import React, { ReactNode, FunctionComponent } from 'react';

interface Props {
  children: ReactNode;
  elementType?: React.ElementType | string;
}

const MyComponent: FunctionComponent<Props> = ({ children, elementType: ElementType = 'h2' }: Props): JSX.Element => {
  return (
    <ElementType>{children}</ElementType>
  );
}

By defining the elementType prop as React.ElementType | string, you allow both React component types and strings to be used as the element type.

Example Usage:

<MyComponent elementType={SomeCustomComponent}><span>Hello, World!</span></MyComponent>

Conclusion

When working with TypeScript and React, properly typing dynamic JSX elements can be a challenge. By using either keyof JSX.IntrinsicElements or the FunctionComponent type, you can overcome this challenge and ensure type safety when creating JSX elements from strings.

Choose the approach that best suits your needs and enjoy the benefits of TypeScript’s strong typing with React!

reference :

https://stackoverflow.com/questions/56675652/proper-typescript-type-for-creating-jsx-element-from-string

Read Another Article :

reactjs