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

0
votes

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: ['[email protected]'] },
    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

1
reactjstypescriptmobx-react

1 Answers

1
votes

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;
}