I'm following this tutorial and am up to the part about implementing a custom AuthContext provider. Here is the suggested code:
const AuthProvider = ({ children }) => {
const [token, setToken] = React.useState(null);
const handleLogin = async () => {
const token = await fakeAuth();
setToken(token);
};
const handleLogout = () => {
setToken(null);
};
const value = {
token,
onLogin: handleLogin,
onLogout: handleLogout,
};
return (
<AuthContext.Provider value={value}> // AuthContext defined right above component; initialised as an empty object.
{children}
</AuthContext.Provider>
);
};
As far as I can tell, that's absolutely fine. But when I try adding it to my code (literally copy and paste it in) the return statement throws 9 errors. Cannot find namespace 'AuthContext'.ts(2503), '>' expected.ts(1005), Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365) etc.
Even if I just try to return a div, I get Cannot find name 'div'.ts(2304).
What's preventing me from being able to return any elements in my return statement?
EDIT: Update to include my full code.
import React, { createContext, ReactNode, useState } from "react";
type AuthContextType = {
token: string | undefined;
};
export const AuthContext = createContext<AuthContextType>(
{} as AuthContextType
);
const fakeAuth = () =>
new Promise((resolve: (arg0: string) => void) => {
setTimeout(() => resolve("2342f2f1d131rf12"), 250);
});
export const AuthProvider = ({ children }: {children: ReactNode}) => {
const [token, setToken] = useState<string | undefined>();
const handleLogin = async () => {
const token = await fakeAuth();
setToken(token);
};
const handleLogout = () => {
setToken(undefined);
};
const value = {
token,
onLogin: handleLogin,
onLogout: handleLogout,
};
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
};
In the example you shared the context is created like this before creating the provider
const AuthContext = React.createContext(null);
If you try something like below?
import React from "react";
const AuthContext = React.createContext(null);
const AuthProvider = ({ children }) => {
const [token, setToken] = React.useState(null);
const handleLogin = async () => {
const token = await fakeAuth();
setToken(token);
};
const handleLogout = () => {
setToken(null);
};
const value = {
token,
onLogin: handleLogin,
onLogout: handleLogout,
};
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
};
Check the file name, in my case it had a .ts extension and it was solved by changing to .tsx
import React, { useState, useEffect, createContext, ReactNode, Context } from 'react';
export type AuthContextType = {
user?: boolean;
isLoading?: boolean;
}
export const initialState: AuthContextType = {
user: false,
isLoading: true,
};
export interface AuthProviderProps {
children?: ReactNode
}
export const AuthContext: Context<AuthContextType> = createContext<AuthContextType>(initialState);
const AuthCookieProvider: React.FC<AuthProviderProps> = ({ children }: AuthProviderProps): JSX.Element => {
const [user, setUser] = useState<AuthContextType>(initialState);
useEffect(() => {
checkUserLogin(setUser);
}, []);
return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
};
export default AuthCookieProvider;