React Context in Typescript

Question

I am creating context to handle authentication in typescript app. I have written this AuthProvider.ts

/*-- Imports --*/

/*--  AuthContextType interface and defaults -- */

const AuthContext = createContext<AuthContextType>(contextDefaults);

export const useAuth = () => {
  return useContext(AuthContext);
};

interface AuthProviderProps {
  children: ReactNode;
}

const AuthProvider = ({ children }: AuthProviderProps) => {
  const [user, setUser] = useState<User | null>(null);

  const isLoggedIn = !!user;

  const login = (data: User) => {
    setUser(data);
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContextType.Provider value={{ user, isLoggedIn, login, logout }}>
      {children}
    </AuthContextType.Provider>
  );
};

export default AuthProvider;

Then I am wrapping App with this AuthProvider;

/* --- imports ---*/

const App = () => {
  return (
      <AuthProvider>
        <div>App</div>
      </AuthProvider>
  );
};

export default App;

This code is giving errors and when I write same code in javascript app it is working fine.

AuthContext.ts Errors

App.js Error

Any help will be appreciated.

Thanks

Ben Clayton · Accepted Answer · 2023-01-20 15:42:07Z

4

Could it be that you've used: AuthContextType.Provider when you mean AuthContext.Provider?

AuthContextType is a Typescript type, not a react context object.

const AuthProvider = ({ children }: AuthProviderProps) => {
  .... 
  return (
    <AuthContext.Provider value={{ user, isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

Does this work?

answered Jan 20, 2023 at 15:42

Ben Clayton

82.4k26 gold badges123 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aqeel Nasrullah Over a year ago

I tried this but didn't work.

Collectives™ on Stack Overflow

React Context in Typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related