New to TS, so working on implementing it on a project. Don't know what this is called so can't search for it correctly. If someone has the term for it then I will change the title.
What I am trying to do is pass the size prop into my component and use that to create the correct HTML element. e.g. size="h3" would create a <h3> element.
import React from "react";
import styles from "./Header.module.css";
interface Props {
children: React.ReactNode;
containerStyle?: React.CSSProperties;
id: string;
size?: string;
title?: string;
titleStyle?: React.CSSProperties;
}
export default function Header({
children,
containerStyle,
id,
size = "h3",
title,
titleStyle,
}: Props) {
const HeadingTag = size;
return (
<div className={styles.headerContainer} style={containerStyle}>
<HeadingTag className={styles.header} style={titleStyle} id={id}>
{title}
</HeadingTag>
<div className={styles.close}>{children}</div>
</div>
);
}`
The error I am getting is:
TS2322: Type '{ children: string | undefined; className: any; style: CSSProperties | undefined; id: string; }' is not assignable to type 'IntrinsicAttributes'.| Property 'children' does not exist on type 'IntrinsicAttributes'.
import React from "react";
import styles from "./Header.module.css";
interface Props {
children: React.ReactNode;
containerStyle?: React.CSSProperties;
id: string;
size?: string;
title?: string;
titleStyle?: React.CSSProperties;
}
export default function Header({
children,
containerStyle,
id,
size = "h3",
title,
titleStyle,
}: Props) {
const HeadingTag = React.createElement(size, { className: styles.header, style: titleStyle, id }, title);
return (
<div className={styles.headerContainer} style={containerStyle}>
{HeadingTag}
<div className={styles.close}>{children}</div>
</div>
);
}
Your problem is that you're trying to cast and render a string "h3" as a jsx object, which will naturally produce errors.
One thing you could do to acheive this goal is to use multiple types, containing your size options as actual jsx elements, just type:
TextSize: h1 | h2 | h3 | ...
That way you ensure that only certain specific valid types can be inserted, and you can simply render the element in your component.
<TextSize>{title}</Textsize>