I am setting up the authentication flow for my app using context API
const AuthContext = createContext({
});
export const AuthProvider = ({ children }) => {
return (
<AuthContext.Provider value={{ user: "Abdullah" }}>
{children}
</AuthContext.Provider>
);
};
export default function useAuth() {
return useContext(AuthContext);
}```
Error that I am getting is : : Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead
the issue here that you are export default the useAuth function and also export AuthProvider .
but on your App you are importing AuthProvider as a default export.
import AuthProvider from "./hooks/useAuth";
so instead it should be import {AuthProvider} from "./hooks/useAuth";