Assigning a type to a string that you are using as a react constructor

[RowiDont]

Hard to figure out how to write this, so I'll just give an example:

Example:

type Props = {
  headerTag: 'h1' | 'h2' | 'h3';
}

const ParentComponent: React.FC<Props> = (props) => {
  const HeaderTag = props.headerTag;
  const text = "Please someone help me type this correctly.";

  return <HeaderTag>{text}</HeaderTag>;
}

Error:

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.

It doesn't like me giving any children to <HeaderTag> even though I know <h1> etc. can obviously have string children.

I tried typing the HeaderTag variable but I didn't know what to type it as, because Typescript knows headerTag is just a string.

The solution I came up with isn't really what I want to do, since it uses React.createElement:

return React.createElement(props.headerTag, {}, text)

How should I be doing?

[ferdaber]

Hmm, this should work out of the box. Which version of TS and the react types are you on?

[RowiDont]

Hmm, this should work out of the box. Which version of TS and the react types are you on?

typescript: 3.2.2
@types/react: 16.7.17

I can't check right now if an update will fix my problems, but will try that later today/tomorrow.

[RowiDont]

I am now on:

typescript: 3.3.4000
@types/react: 16.8.8

I'm still getting this error.

Type '{ children: (string | Element)[]; className: any; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'className' does not exist on type 'IntrinsicAttributes'.

If I remove the className prop, I simply get:

Type '{ children: (string | Element)[]; }' has no properties in common with type 'IntrinsicAttributes'.

[ferdaber]

With this entire codebase I get no errors with the same version:

import React from 'react'

type Props = {
  tag: 'h1' | 'h2' | 'h3'
}

export const Component = (props: Props) => {
  const text = 'abc'
  const HeaderTag = props.tag
  return <HeaderTag>{text}</HeaderTag>
}

Is there anything else you're leaving out? maybe a minimally-reproducible repo would help too.

[RowiDont]

Okay, that's good to hear!

I'll see if I can make a small repo that has the issue.

[RowiDont]

I cannot replicate it outside my project. Must be something about my current project that is causing this. Thanks for looking.

[swyxio]

ha, good to know. ifyou ever do figure out what blocked it, i'm super curious to hear!