CODEWITHSUNDEEP
reactjstypescripttypescript-genericsreact-typescript
BernaMariano
BernaMariano

Reputation: 866

Typescript Stateless React Component as named function

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

Upvotes: 1

Views: 238

Answers (1)

BernaMariano
BernaMariano

Reputation: 866

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

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

Upvotes: 4

Related Questions