CODEWITHSUNDEEP
reactjstypescripteslint
MrVoland
MrVoland

Reputation: 283

ESLint - missing return type on function react component - Typescript error explanation

I already saw some of the answers for a similar question when the name of the component is defined, but I would like to understand more the logic behind ESLint with components exported as defaults as in my case.

({ children }: AppProviderProps) => - according to ESLint: "Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types". Could someone explain to me why as I always thought it's a standard way to write React components? And what would be the solution in that case?

import React, { ReactNode } from 'react';
import { Provider } from 'react-redux';
import store from '../../@state/createStore';


export default ({ children }: AppProviderProps) => (
  <Provider store={store}>
    **my code**
  </Provider>
);

interface AppProviderProps {
  children: ReactNode;
}

PS I know I can disable the rule, but would like to know how to write so ESLint wouldnt scream at me.

Upvotes: 0

Views: 1944

Answers (1)

mcy
mcy

Reputation: 291

The rule typescript-eslint/explicit-module-boundary-types is telling you that your function requires and explicit return type. From the source:

Explicit types for function return values and arguments makes it clear to any calling code what is the module boundary's input and output.

So you need to add the appropriate return type, which in your example is whatever the type of <Provider /> is:

Replace TypeOfProviderHere with the correct type.

export default ({ children }: AppProviderProps): TypeOfProviderHere => (
  <Provider store={store}>
    **my code**
  </Provider>
);

Upvotes: 1

Related Questions