How to add type FunctionComponent to React functional component using the "function" syntax and not "const"?

Question

This works fine:

import React, { FunctionComponent } from "react";
const Counter: FunctionComponent = () => <div>hello from Counter</div>;
export default Counter;

This has compile error:

import React, { FunctionComponent } from "react";
function Counter1(): FunctionComponent {
  return <div>hello from Counter1</div>;
}
export default Counter1;

The error says:

Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement ReactElement Component)>) | (new (props: any) => Component)>'.ts(2322)

How to write functional component with FunctionComponent type using "function" syntax?

Nino Filiu · Accepted Answer · 2019-07-16 17:21:48Z

9

In

const Counter: FunctionComponent = () => <div>hello from Counter</div>;

Counter is of type FunctionComponent. That is the desired behavior. But in:

function Counter(): FunctionComponent {
  return <div>hello from Counter1</div>;
}

Counter's type is a function that returns a FunctionComponent which is not what you want, and does not fit the function definition.

If you absolutely want to use function, you can write it like that:

const Counter: FunctionComponent = function() {
  return <div>hello from Counter1</div>;
}

answered Jul 16, 2019 at 17:21

Nino Filiu

18.9k11 gold badges65 silver badges97 bronze badges

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

Comments

dx_over_dt · Accepted Answer · 2020-05-20 18:55:59Z

1

You can use an interface with the same name as the function.

interface Counter extends FunctionComponent {}
function Counter() {
  return <div>hello from Counter1</div>;
}

answered May 20, 2020 at 18:55

dx_over_dt

14.5k17 gold badges69 silver badges129 bronze badges

Comments

Rael Gugelmin Cunha · Accepted Answer · 2023-03-23 12:50:28Z

0

A react functional component is function returning a ReactElement (this is what several libraries returns in their TypeScript definition, by example react-router-dom):

import React, { ReactElement } from 'react';

function Counter1(): ReactElement {
  return <div>hello from Counter1</div>;
}

edited Mar 23, 2023 at 12:50

answered Feb 28, 2023 at 12:25

Rael Gugelmin Cunha

3,5721 gold badge32 silver badges28 bronze badges

2 Comments

Mike Szyndel Over a year ago

Could you please improve this answer by adding a few words of explanation?

Rael Gugelmin Cunha Over a year ago

@MikeSzyndel: A react functional component is function returning a ReactElement.

Collectives™ on Stack Overflow

How to add type FunctionComponent to React functional component using the "function" syntax and not "const"?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related