Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 727
SergioP Avatar asked Jun 09 '19 23:06

SergioP


2 Answers

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>

like image 121
Nerios Lamaj Avatar answered Sep 19 '22 12:09

Nerios Lamaj


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

like image 28
Kodali444 Avatar answered Sep 16 '22 12:09

Kodali444