react hooks: remember me checkbox in Login form not working - reactjs

Question

I have a login form functional component built using react-hooks comprising of userid, password and rememberMe checkbox.
For some reason, the checkbox is not working as in, when I click on it, it does tick or untick. Which is basically its state is not changing.
userid, password and rememberMe checkbox needs to be sent to the backend. That's why I have to couple it with inputs. If it was an independent checkbox than it would have been easy.
I have handleChange() for userid, password and I have handleChechbox() for handling checkbox.
Below is the complete code.
const Login = (props) => {
const [inputs, setInputs] = useState({
userid: "",
password: "",
rememberPassword: false,
});
const [submitted, setSubmitted] = useState(false);
const { userid, password, rememberPassword } = inputs;
// reset login status
useEffect(() => {
dispatch(loginActions.logout());
}, []);
function handleChange(e) {
const { name, value } = e.target;
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
function handleChechbox(e) {
const { name, value } = e.target;
console.log("eeeeee check", e.target.type);
console.log("eeeeee check", e.target.checked);
console.log("eeeeee check inputs", inputs);
console.log("eeeeee check inputs remember", inputs.rememberPassword);
if (e.target.type === "checkbox" && !e.target.checked) {
setInputs((inputs) => ({ ...inputs, [name]: "" }));
} else {
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
}
function handleSubmit(e) {
e.preventDefault();
setSubmitted(true);
if (inputs) {
// get return url from location state or default to home page
const { from } = location.state || {
from: { pathname: "/admin/summary" },
};
dispatch(loginActions.login(inputs, from));
// props.history.push("/admin/summary");
}
}
return (
<div className="Login">
<div className="login-form-container">
<div className="content">
<Form className="login-form" onSubmit={handleSubmit}>
<InputGroup>
<InputGroupAddon
className="input-group-addon"
addonType="prepend"
>
<i className="fa fa-user"></i>
</InputGroupAddon>
<input
autoFocus
type="email"
aria-label="Username"
aria-describedby="Username"
aria-invalid="false"
placeholder="Username or Email"
name="userid"
value={userid}
onChange={(event) => handleChange(event)}
className={
"form-control" + (submitted && !userid ? " is-invalid" : "")
}
/>
{submitted && !userid && (
<div className="invalid-feedback">
Username or Email is required
</div>
)}
</InputGroup>
<InputGroup>
<InputGroupAddon
className="input-group-addon"
addonType="prepend"
>
<i className="fa fa-lock"></i>
</InputGroupAddon>
<input
type="password"
name="password"
placeholder="Password"
aria-label="password"
aria-describedby="password"
value={password}
onChange={(event) => handleChange(event)}
className={
"form-control" + (submitted && !password ? " is-invalid" : "")
}
/>
{submitted && !password && (
<div className="invalid-feedback">Password is required</div>
)}
</InputGroup>
<div className="form-actions">
<br />
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="rememberPassword"
name="checkbox"
checked={rememberPassword}
onChange={(event) => handleChechbox(event)}
// required
/>
<label className="form-check-label" for="rememberPassword">
Remember me
</label>
</div>
</div>
</Form>
</div>
</div>
</div>
);
};

Answer 1

You're reading the name attribute which is 'checkbox' not 'rememberPassword'. I'd imagine a simple console log of inputs would reveal you're setting the wrong property name.
Anyway your input is controlled, you don't need to read DOM values since you know that the value is and what it should change to.
function handleRememberMeChange(e) {
setInputs((inputs) => ({ ...inputs, rememberPassword: !inputs.rememberPassword }));
}
If you want it to work generically from an attribute then use id or change name to "rememberPassword". And use e.target.checked not e.target.value.
Also it's fine to do onChange={handleChechbox} instead of onChange={(event) => handleChechbox(event)} it's the same thing.