Search code examples
reactjstypescriptreact-context

React Context - Use Provider with context like ContextName.Provider

I am creating a context with typescript.

export const UserContext = createContext<
  { user: User; onChangeUser: (userId: string) => void } | undefined
>(undefined);

When creating the provider that will collect the child elements as a prop, the following error appears

export function UserProvider({ children }: Props) {
  const [userId, setUserId] = useState<string | null>(null);

  // this error: Cannot find namespace 'UserContext'.
  return (
    <UserContext.Provider
      value={{
        user,
        onChangeUser: (userId: string) => {
          setUserData(userId);
        },
      }}
    >
      {children}
    </UserContext.Provider>
  );
}
Solution

  • Your file needs the .tsx extension instead of .ts.

    In a .ts file, TypeScript will count <Type...> expressions as you trying to cast the following expression to the Type... type, instead of handling it as a JSX expression.