Type 'string' is not assignable to type '(url: string) => string'.ts(2322)

Question

I have this material ui copyright component:

export default function Copyright(link: string, text: string) {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href={link}>
        {text}
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

If I try to use it like this, I don't get any errors:

{Copyright('https://hello.com', 'HELLO')}

However, if I try to use it like this:

<Copyright link={'https://hello.com'} text={'hello'}></Copyright>

I get this error on link even though I have not specified any 'url' anywhere else:

Type 'string' is not assignable to type '(url: string) => string'.ts(2322)

How can I use this component with the second method? A similar question suggested to use casting but in my case, there can be multiple links with which I want to call the component in the future.

Answer 1

If you want to use

<Copyright link={"https://hello.com"} text={"hello"} />

You need to define the props type like this

props: { link: string; text: string }

Usage:

function Copyright(props: { link: string; text: string }) {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {"Copyright © "}
      <Link color="inherit" href={props.link}>
        {props.text}
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}