Invalid Hook Call Warning - reactjs

Question

I'm facing this error: "Invalid Hook Call Warning" and it says that there are three possibilities of why it is happening:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
1 and 3 I'm quite sure they're not causing the problem, I installed react from the 'create react-app' boilerplate yesterday.
This is the code that is causing the issue.
import { createContext, useState, useContext } from "react"
import api from "../services/api"
export const AuthContext = createContext({})
const [user, setUser] = useState(null)
async function Login() {
const response = await api.post("/auth/local", {
identifier: "teste#teste.com",
password: "123123",
})
setUser(response.data.user)
api.defaults.headers.Authorization = `Bearer ${response.data.token}`
}
export function AuthProvider({ children }) {
return (
<AuthContext.Provider value={{ signed: Boolean(user), Login }}>
{children}
</AuthContext.Provider>
)
}
export function useAuth() {
const context = useContext(AuthContext)
return context
}
Could anyone help me?

Answer 1

You can use Hooks only inside of a component. You need to move your states also the login function as well, to the provider component.
Something like this;
import { createContext, useState, useContext } from "react"
import api from "../services/api"
export const AuthContext = createContext({})
export function AuthProvider({ children }) {
const [user, setUser] = useState(null)
async function Login() {
const response = await api.post("/auth/local", {
identifier: "teste#teste.com",
password: "123123",
})
setUser(response.data.user)
api.defaults.headers.Authorization = `Bearer ${response.data.token}`
}
return (
<AuthContext.Provider value={{ signed: Boolean(user), Login }}>
{children}
</AuthContext.Provider>
)
}
export function useAuth() {
const context = useContext(AuthContext)
return context
}