React and LocalStorage - reactjs

Question

I am trying this code where I can send some data and save it in the localstorage. I tied the below code.
function Login () {
const uname=useRef()
const pass = useRef()
const getEmail = localStorage.getItem("emailData")
const getPassword = localStorage.getItem("passwordData")
const handleSubmit=()=>{
if(uname.current.value==="admin"&&pass.current.value==="admin"){
localStorage.setItem("emailData","admin")
localStorage.setItem("passwordData","admin")
}
}
const [values, setValues] = useState({
email: "",
pass: "",
showPass: false,
});
const handlePassVisibilty = () => {
setValues({
...values,
showPass: !values.showPass,
});
};
return (
<div>
{
getEmail&&getPassword?<Home/>:
<Container maxWidth="sm">
<Grid
container
spacing={2}
direction="column"
justifyContent="center"
style={{ minHeight: "100vh" }}
>
<Paper elelvation={2} sx={{ padding: 10 }}>
<h2>Welcome to Employee Management System</h2>
<form onSubmit={handleSubmit}>
<Grid container direction="column" spacing={2}>
<Grid item>
<TextField
type="text"
fullWidth
label="Enter your Username"
placeholder="Username"
variant="outlined"
required
ref={uname}
/>
</Grid>
<Grid item>
<TextField
type={values.showPass ? "text" : "password"}
fullWidth
label="Enter your Password"
placeholder="Password"
variant="outlined"
required
ref={pass}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={handlePassVisibilty}
aria-label="toggle password"
edge="end"
>
{values.showPass ? (
<VisibilityOffIcon />
) : (
<VisibilityIcon />
)}
</IconButton>
</InputAdornment>
),
}}
/>
</Grid>
<Grid item>
<Button type="submit" fullWidth variant="contained" >
Sign In
</Button>
</Grid>
</Grid>
</form>
</Paper>
</Grid>
</Container>
}
</div>
);
};
export default Login;
What I am trying to do is that if the localstorage has the correct username and password the login page will redirect to the home page. The problem I am facing is that the data is not stored in the localstorage. Can someone please explain to me what I am doing wrong? Any help is appreciated Thank you.

Answer 1

you need to give type="submit" to button of your form in order to submit form
<Button fullWidth type="submit" variant="contained">
Sign In
</Button>
if it still not working, use state instead
here what I did with your code :
const getEmail = localStorage.getItem("emailData")
const getPassword = localStorage.getItem("passwordData")
const [values, setValues] = useState({
email: "",
pass: "",
showPass: false,
});
const handleSubmit=()=>{
if(values.email ==="admin" && values.pass ==="admin"){
localStorage.setItem("emailData","admin")
localStorage.setItem("passwordData","admin")
}
}
const handlePassVisibilty = () => {
setValues({
...values,
showPass: !values.showPass,
});
};
return (
<div>
{
getEmail&&getPassword?<Home/>:
<Container maxWidth="sm">
<Grid
container
spacing={2}
direction="column"
justifyContent="center"
style={{ minHeight: "100vh" }}
>
<Paper elelvation={2} sx={{ padding: 10 }}>
<h2>Welcome to Employee Management System</h2>
<form onSubmit={handleSubmit}>
<Grid container direction="column" spacing={2}>
<Grid item>
<TextField
type="text"
fullWidth
label="Enter your Username"
placeholder="Username"
variant="outlined"
required
value={values.email}
onChange={(e)=>{
setValues(prevState=>({...prevState,email:e.target.value}))
}}
/>
</Grid>
<Grid item>
<TextField
type={values.showPass ? "text" : "password"}
fullWidth
label="Enter your Password"
placeholder="Password"
variant="outlined"
required
value={values.pass}
onChange={(e)=>{
setValues(prevState=>({...prevState,pass:e.target.value}))
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={handlePassVisibilty}
aria-label="toggle password"
edge="end"
>
{values.showPass ? (
<VisibilityOffIcon />
) : (
<VisibilityIcon />
)}
</IconButton>
</InputAdornment>
),
}}
/>
</Grid>
<Grid item>
<Button type="submit" fullWidth variant="contained" >
Sign In
</Button>
</Grid>
</Grid>
</form>
</Paper>
</Grid>
</Container>
}
</div>
);