const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<AppRoutes/>
</AuthProvider>
</QueryClientProvider>,
</React.StrictMode>
);
export const AuthProvider: FC = ({children}) => {
// console.log("children");
const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth())
const [currentUser, setCurrentUser] = useState<UserModel | undefined>()
const saveAuth = (auth: AuthModel | undefined) => {
setAuth(auth)
if (auth) {
authHelper.setAuth(auth)
} else {
authHelper.removeAuth()
}
}
const logout = () => {
saveAuth(undefined)
setCurrentUser(undefined)
}
return (
<AuthContext.Provider value={{auth, saveAuth, currentUser, setCurrentUser, logout}}>
{children}
</AuthContext.Provider>
)
}
yarn.lock
file in our instructions and it will solve the issue Property "children" does not exist on type "Props".
).children
as a prop: https://bobbyhadz.com/blog/react-property-children-does-not-exist-on-type.type BoxProps = {
name: string;
country: string;
children: React.ReactNode; // 👈️ added type for children
};
children: React.ReactNode
was a part of React.FC
. And now in the React v18.x.x React team did changes in React types and removed it from React.FC
. yarn.lock
file or add children: React.ReactNode
by yourself.