TS2322: Type error while im using useContext with a function

Question

Im tyring to pass through Provider value ={ ..} the states and functions that i want react to listen on changes. I have login function that accept userId and token and a logout function that accept nothing. In the AuthContext i made an interface that declare the types that the functions accept but still i get an TS2322 error.

the Error is:

TS2322: Type '{ userId: string | null; token: string | null; isLoggedIn: boolean; login: (token: string, uid: string) => void; logout: () => void; }' is not assignable to type 'Auth'. Object literal may only specify known properties, and 'login' does not exist in type 'Auth'.

AuthContext.tsx

import {createContext} from "react";

interface Auth{
  userId:string | null;
  token: string | null;
  isLoggedIn: boolean;
  (t:string | null, id:string | null) : void;
  (): void;
}

export const AuthContext = createContext<Auth | null>(null);

App.tsx

import {AuthContext} from "./shared/context/AuthContext";

const App: React.FC = () => {

const [token, setToken] = useState<string | null>(null);
const [userId, setUserId] = useState<string | null>(null);

const login = useCallback((token:string, uid:string) => {
    setToken(token);
    setUserId(uid);
}, []);

const logout = useCallback(() => {
    setToken(null);
    setUserId(null)
}, []);

return (
    <AuthContext.Provider value={{
        userId: userId,
        token: token,
        isLoggedIn: !!token,
        login: login, //  **** TS2322 Error at this line ****
        logout: logout
    }}>
        <div className="App">
            <BrowserRouter forceRefresh={true}>
                <Switch>
                    <Route exact path="/">
                        <Home/>
                    </Route>
                    <Route path="/login">
                        <LoginForm/>
                    </Route>
                    <Route path="/signup">
                        <RegisterForm/>
                    </Route>
                    <Route path="/cart">
                        <Cart/>
                    </Route>
                    <Redirect to="/" from="*"/>
                </Switch>
            </BrowserRouter>
        </div>
    </AuthContext.Provider>
);
}

export default App;

Chris · Accepted Answer · 2021-09-29 12:30:37Z

0

The error message is actually pretty clear. You need to define the login/logout properties specifically on the Auth interface.

interface Auth{
  userId:string | null;
  token: string | null;
  isLoggedIn: boolean;
  login(token:string | null, uid:string | null) : void;
  logout(): void;
}

answered Sep 29, 2021 at 12:30

Chris

6,6911 gold badge25 silver badges27 bronze badges

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

2 Comments

Oz Shurki Over a year ago

Im pretty new in this so i thought i dont need to write the name of the function in Auth. It fixed it, thanks :)

Chris Over a year ago

No worries, I tried to make you realize that most of the time the answer is already given in the error message. Glad it fixed your problem!

Collectives™ on Stack Overflow

TS2322: Type error while im using useContext with a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related