Typescript ESLint Error - How can I type children when using react functional components?

Question

I am putting together a boilerplate sample of:

• React 16.x (from create-react-app)
• Typescript
  • with functional components
• Material-UI
• Mobx-React
  • via context providers
• ESLint

I have almost everything worked out, but I can't seem to figure out this one ESLint error I am getting. I have a MobX store provider that looks like this

import { useLocalStore } from 'mobx-react';
import React from 'react';
import { StoreType } from '../Types/StoreType';
import { StoreContext } from './StoreContext';

export const StoreProvider = ({ children }) => {
  const store = useLocalStore(() => ({
    loginStore: { email: ['neil.peart@rush.yyz'] },
    applicationStore: { firstName: 'neil', lastName: 'peart' }
  })) as StoreType;
  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
};

I am getting the error:

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

6:33 error 'children' is missing in props validation react/prop-types

If you want to pull the whole thing down, you can here: https://github.com/Savij/functional-react-mobx-material

Appreciate any insight! -J

Answer 1

The return type of StoreProvider in your example is a React.ReactElement , which can be set like so:

export const StoreProvider = ({ children }): React.ReactElement => {
    return ... 
}

The type of children in your source code is also React.ReactElement , but must be wrapped in an interface because it's getting passed in as a property of the component's props.

export const StoreProvider = ({ children }: StoreProviderProps): React.ReactElement => {
    return ... 
}

interface StoreProviderProps {
    children: React.ReactElement;
}