Creating heading element using props in TypeScript-CodePudding

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'.

CodePudding user response：

Use React.createElement()

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>
  );
}

Other Examples

CodePudding user response：

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>