Bug: { children }: { children: Element[]; }) => boolean' is not assignable to type 'FC<{ children: Element[]; }> about react

[egonSchiele]

I don't see a React bug, but I do see a few different issues going on:

< /AuthContext.Provider> needs to be </AuthContext.Provider>.

In the second code snippet, you are using useContext at the top level, which is not allowed. Maybe you meant something like this?

import { Context, createContext, useEffect, useState, useContext } from "react";
import { AppSettings, AppSettingsContext } from "./AppSettings";
// I mocked out AuthService here because I'm not sure what your code looks like
import AuthService from "./AuthService";
export const AuthContext: Context<AuthService> = createContext<AuthService>(
  null!
);

export const AuthProvider: React.FC<{ children: JSX.Element[] }> = ({
  children,
}) => {
  let appSettings: AppSettings = useContext<AppSettings>(AppSettingsContext)!;
  const [authService, setAuthService] = useState<AuthService>(
    new AuthService(appSettings)
  );

  return (
    <AuthContext.Provider value={authService}>{children}</AuthContext.Provider>
  );
};

Finally, React.FC is not recommended:
facebook/create-react-app#8177

[eps1lon]

Can you include a complete, minimal repro using https://www.typescriptlang.org/play?

Also please include the version of typescript and @types/react used (e.g. by using yarn why @types/react).