Typescript Stateless React Component as named function

Question

Let's say I have a React component called Link:

function Link(props) {
  return <a href={props.url}>{props.children}</a>
}

How do I type this function without turning it into an arrow-function?

This doesn't seem to work:

interface ILink {
  url: string
}

function Link(props: React.FC<ILink>) { }

// Property 'url' does not exist on type 'FC<ILink>'.
// Property 'children' does not exist on type 'FC<ILink>'.

But as an arrow-function it instantly does work?

interface ILink {
  url: string
}

const Link: React.FC<ILink> = (props) => { }

// Compiles

BernaMariano · Accepted Answer · 2020-11-28 04:50:53Z

4

You have to use the combo React.PropsWithChildren and React.ReactElement so it becomes:

function Link(props: PropsWithChildren<ILink>): ReactElement {}

edited Nov 28, 2020 at 4:50

answered Apr 15, 2020 at 15:30

BernaMariano

8662 gold badges9 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Typescript Stateless React Component as named function

How do I type this function without turning it into an arrow-function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

How do I type this function without turning it into an arrow-function?

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related