Type '{}' has no properties in common with type 'IntrinsicAttributes'

Question

I create a dynamic button (Comp) in React TypeScript. "Comp" can be a button, anchor, or Link (React Router). I got a problem with the type having no properties in common with the type 'IntrinsicAttributes'.

type ButtonProps = {
  href?: string;
  to?: string;

  children: ReactNode;
};

function Button(props: ButtonProps) {
  const { href, to, children } = props;

  let Comp = 'button';
  if (href) Comp = 'a';
  if (to) Comp = 'Link';

  const compProps = { 
    href,
    to,
  };

  return <Comp {...compProps}>{children}</Comp>;
}

Here is the problem:

Type '{ children: ReactNode; href: string | undefined; to: string | undefined; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559).

I researched some pics in StackOverflow but it's not my case.

Answer 1

If you want to pass elements as strings, you can use React.createElement for dynamic props with those elements.

Note that Link is not a standard HTML element, so we cannot pass it as a string like button and a.

import React, { ReactNode, ElementType } from 'react'
import { Link } from 'react-router-dom'

type ButtonProps = {
  href?: string;
  to?: string;

  children: ReactNode;
};

function Button(props: ButtonProps) {
  const { href, to, children } = props;

  let comp: ElementType | typeof Link = 'button';
  if (href) comp = 'a';
  if (to) comp = Link;

  const compProps = { 
    href,
    to,
  };

  return React.createElement(comp, compProps, children);
}

Playground