Invalid Hook Call when executing anonymous function using button onClick - reactjs

Question

I am trying to create a submit button in React.
This is the code I have to handle the onClick event:
const handleEditProfileSubmit = () => {
const authContext = useContext(AuthContext);
if (newUserEntityDetails.username !== "") {
newUserEntityDetails.uid = authContext.user.uid;
axios.put(ENDPOINT + authContext.user.uid, newUserEntityDetails).then((res: any) => console.log(res)).catch((e: any) => console.log(e));
}
};
And this is the code I have for the button:
<Button onClick={handleEditProfileSubmit}>Submit</Button>
Which uses the Button material-ui component.
I have tried using onClick={() => {handleEditProfileSubmit}}, however this results in the submit button doing nothing.
I have also tried turning the handleEditProfileSubmit constant into a function and doing onClick={handleEditProfileSubmit()}, however this gets the same error.
I am unsure of what I am doing wrong. The axios API calls work fine in other parts of my code so I think it's not about the API call.
EDIT: This is the code for the entire component.
import React, {useContext} from "react";
import Navbar from "../components/navbar";
import { Redirect } from "react-router-dom";
import { AuthContext } from "../Auth";
import { Container } from "#material-ui/core";
import { Grid } from "#material-ui/core";
import { Paper, Card, CardContent } from "#material-ui/core";
import { MenuList, MenuItem} from "#material-ui/core";
import { Typography } from "#material-ui/core";
import { TextField } from "#material-ui/core";
import { Button } from "#material-ui/core";
const axios = require('axios');
const ENDPOINT = 'http://localhost:3000/api/user/';
var newUserEntityDetails = {
uid: "",
username: ""
}
const authContext = useContext(AuthContext);
const handleEditProfileSubmit = () => {
if (newUserEntityDetails.username !== "") {
newUserEntityDetails.uid = authContext.user.uid;
var a = axios.put(ENDPOINT + authContext.user.uid, newUserEntityDetails).then((res: any) => console.log(res)).catch((e: any) => console.log(e));
console.log(a);
}
};
const Settings = () => {
// If there is no user in the session
if (authContext.user == null) {
return(<Redirect to={"/login"} />);
} else {
return(
<>
<Navbar />
<Container maxWidth="lg">
<Grid container spacing={3} direction="row" style={{ minHeight: "90vh" }}>
<Grid item xs={3}>
<Paper>
<MenuList>
<MenuItem>
<Typography variant="body1">Profile</Typography>
</MenuItem>
<MenuItem>
<Typography variant="body1">Account Settings</Typography>
</MenuItem>
<MenuItem>
<Typography variant="body1">Delete Account</Typography>
</MenuItem>
</MenuList>
</Paper>
</Grid>
<Grid item xs={6}>
<Card>
<CardContent>
<Typography variant="subtitle2" gutterBottom>
Change Username
</Typography>
<TextField
id="outlined-helperText"
label="Change Username"
helperText="Username must be unique"
variant="outlined"
onChange = { input => {
newUserEntityDetails.username = input.target.value;
}}
/>
<Button onClick={() => {handleEditProfileSubmit}}>Submit</Button>
</CardContent>
</Card>
</Grid>
</Grid>
</Container>
</>
);
}
};
export default Settings;
P.S I have been told by my project manager to avoid using classes for components hence I am trying to write functional components

Answer 1

You're calling Hooks inside function, that's what causing the problem.
As per React docs: Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders
Declare hook top of your function, you should be fine!!.
...all imports
const Settings = () => {
const authContext = useContext(AuthContext); //This is what you need to do.
const handleEditProfileSubmit = () => {
if (newUserEntityDetails.username !== "") {
newUserEntityDetails.uid = authContext.user.uid;
var a = axios.put(ENDPOINT + authContext.user.uid, newUserEntityDetails).then((res: any) => console.log(res)).catch((e: any) => console.log(e));
console.log(a);
}
};
....

Answer 2

You need to have const authContext = useContext(AuthContext); outside the handleEditProfileSubmit.