React Typescript on dynamic component

Question

Using React with typescript I want to be able to create a dynamic component. Here is snapshot from code

const CustomTag = `${section.header_type}`;
<CustomTag className={styles.textimage__title}>{section?.header}</CustomTag>

on CustomTag markup in VSCode I get the following error

Type '{ children: string; className: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'children' does not exist on type 'IntrinsicAttributes'.ts

How do I define in this case for this component properly the types?

section.header_type is an enum for headers like h1, h2, h2 and is definable in backend. — fefe
– fefe, Commented Sep 1, 2022 at 20:52
Does this answer your question? stackoverflow.com/questions/40960411 — lepsch
– lepsch, Commented Sep 1, 2022 at 21:12
Hi @lepsch the code alone works, just the type is not correct — fefe
– fefe, Commented Sep 1, 2022 at 21:52

lepsch · Accepted Answer · 2022-09-01 22:23:12Z

1

Declare CustomTag type as being keyof JSX.IntrinsicElements. It's going to be like the following code snippet.

const CustomTag: keyof JSX.IntrinsicElements = `${section.header_type}`;
<CustomTag className={styles.textimage__title}>{section?.header}</CustomTag>

Just note that the ${section.header_type} should be a valid HTML tag.

answered Sep 1, 2022 at 22:23

lepsch

10.5k5 gold badges33 silver badges48 bronze badges

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

2 Comments

fefe Over a year ago

thanks for Feedback this approach hints the following Type 'string' is not assignable to type 'keyof IntrinsicElements'.ts(2322)

lepsch Over a year ago

Try this instead: const CustomTag = `${section.header_type}` as keyof JSX.IntrinsicElements;

Collectives™ on Stack Overflow

React Typescript on dynamic component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related