useContext not working for me with Typescript

Question

I am trying to implement useContext with Typescript, but unfortunately I'm getting an error

Code sample :

import React, { createContext, useContext, useState } from "react";

type IUser = {
  email: String;
  isAuthorized: boolean;
};
const user: IUser = { email: "", isAuthorized: false };
export const AppContext = createContext<IUser>(user);

const appcontextprodivder = (props: any) => {
  //const [appdata, setappdata] =  useState<IUser>(user);

  const [userstate, setuserstate] = useState<IUser>(user);

  const login = (useremail: string) => {
    setuserstate({ email: useremail, isAuthorized: true });
  };

  const logout = () => {
    setuserstate({ email: "", isAuthorized: false });
  };

  const updaateemail = (email: string) => {
    setuserstate({ ...userstate, email: "" });
  };

  return (
    <AppContext.Provider value={{ userstate, login, logout }}>
      {props.children}
    </AppContext.Provider>
  );
};
export default appcontextprodivder;

I'm getting this error:

Type '{ userstate: IUser; login: (useremail: string) => void; logout: () => void; }' is not assignable to type 'IUser'.
Object literal may only specify known properties, and 'userstate' does not exist in type 'IUser'

Code screenshot:

Answer 1

Please, try this instead. The issues I noticed are

1. Wrong component name i.e appcontextprovider should not be in lowercase
2. The IUser was passed like the entire state, but that needed to be part of another state for login and logout to work

import React, {
  createContext,
  useContext,
  useState
} from "react";


type IUser = {
  email: String;
  isAuthorized: boolean;
};

type ContextType = {
  userstate: IUser;
  login: (arg: string) => void;
  logout: () => void
}


const user: IUser = {
  email: "",
  isAuthorized: false
};
export const AppContext = createContext < ContextType | null > (null);

const AppContextProvider = (props: any) => {
  //const [appdata, setappdata] =  useState<IUser>(user);
  const [userstate, setuserstate] = useState < IUser > (user);

  const login = (useremail: string) => {
    setuserstate({
      email: useremail,
      isAuthorized: true
    });
  };

  const logout = () => {
    setuserstate({
      email: "",
      isAuthorized: false
    });
  };

  const updaateemail = (email: string) => {
    setuserstate({ ...userstate,
      email: ""
    });
  };

  return ( <
    AppContext.Provider value = {
      {
        userstate,
        login,
        logout
      }
    } > {
      props.children
    } <
    /AppContext.Provider>
  );
};
export default AppContextProvider;