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

Viewed 46222

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

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>

Related