explicit-function-return-type creating functional component react in typescript

Question

const App: FC = () => {
   const addItem = () => {
      useState([...items, {id:1,name:'something'])
   }
   return<div>hello</div>
}

linter gave me error, on my App.tsx.

warning  Missing return type on function  @typescript-eslint/explicit-function-return-type

I have to turn off explicit-function-return-type, how to fix above code? The AddItem doesn't have to return something.

Answer 1

I am not sure which version of react are you using, but the so-called right way of providing typings for your Functional Components using TypeScript and React 16.8 would be to use React.FC or React.FunctionComponent . The following would run fine on most TsLint configs. You can try using the below on your project that runs on @typescript-eslint

import * as React from 'react';

const App: React.FC = () => {
   // do something

   return <div>hello</div>;
}

However, if the above does not work, you may be required to explicitly type the return value by doing the following:

import * as React from 'react';

const App: React.FC = (): JSX.Element => {
   // do something

   return <div>hello</div>;
}