Dynamic TagName causing error after version upgrade

typescript version: 3.2.2 IDE: VS Code

Description: I updated from v3.1.6 to v3.2.2. This is my code:

import * as React from 'react';

export interface Props {
  tag?: string,
};

const MyComponent: React.FunctionComponent<Props> = ({
  tag: Tag = 'div', children
}) => {
  return (
    <Tag> // this is causing the error
      {children}
    </Tag>
  );
};

Expected: No error

Actual: Error produced: [ts] Type '{ children: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'. [2559]

This seems like a regression as it worked in v3.1.6

[weswigham]

For anyone reading this: This error is pretty much correct and is because making a tag out of an arbitrary string isn’t really typesafe. The NeedsInvestigation tag is, IIRC, just to find why it worked before we refactored how we handled JSX (it shouldn’t have from what I know…). In your code, if you want to say that you have a valid html tag name, you should use keyof React.ReactDOM instead of string (which, FYI contains both the HTML and SVG elements - if you only intend for one or the other, you should select either ReactSVG or ReactHTML instead). JSX.IntrinsicElements contains no definition for the props for something of type string (that would require an index signature, which react does not define). This makes perfect sense - react has no idea how to make a "foobar" tag correctly. Within react’s types, ReactType is defined in a similar fashion (in terms of JSX.IntrinsicElements).

If anything, I’d say that the preferred workaround for anyone who finds this, rather than suppressing the error, is trying to rejigger their string type into the keyof React.ReactDOM (or keyof JSX.IntrinsicElements) union instead.

[zposten]

This seems to work:

export function DynamicTag(props: DynamicTagProps) {
  let {tag: Tag, ...rest} = props

  return <Tag {...rest} />
}

export type DynamicTagProps = React.HTMLAttributes<HTMLOrSVGElement> & {
  children: string
  tag?: keyof JSX.IntrinsicElements
}

DynamicTag.defaultProps = {tag: 'div'}

This is the calculated type of tag:

…until you try to add a ref prop to Tag. Then you get the error:

Expression produces a union type that is too complex to represent. ts(2590)