CODEWITHSUNDEEP
reactjstypescripteslint
SergioP
SergioP

Reputation: 608

React: Missing return type on function. eslint(@typescript-eslint/explicit-function-return-type)

I'm new to Typescript React. In a really basic functional component, eslint is complaining me it's missing the returned type for the functional component itself. Where I'm wrong?

enter image description here

Upvotes: 20

Views: 63075

Answers (2)

Nerios Lamaj
Nerios Lamaj

Reputation: 319

As explained by Nicholas Tower in this answer Typescript | Warning about Missing Return Type of function, ESLint, depending on the react version that you are using, you can use any of the lines below:

If you're on the latest react version (16.8.0 or later), do this: const Component: React.FunctionComponent<Props> = (props: Props) => { }

Prior to 16.8, you'd instead do: const Component: React.SFC<Props> = (props: Props) => {}

Where SFC stands for "stateless functional component".

EDIT:------

Based on @SergioP's comment, a more idiomatic solution would be

const Test = ({ title }: Props): JSX.Element => <div>{title}</div>

Upvotes: 27

Kodali444
Kodali444

Reputation: 1443

I too faced this issue.

const handleLogout = () => {
router.push('/')
}

The above code given same issue to me, then code is updated like below, then error disappear in my case

const handleLogout = (): void => {
router.push('/')
}

Reference Link: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/explicit-function-return-type.md

Upvotes: 7

Related Questions