I can't catch the value of the checkbox input - reactjs

Question

I have a React form where I can't control the value of the checkbox input with the useState hook. I don't have this problem with other inputs.
I can't pass the checkbox input value to the AuthData object. When you click the "Sign in" button, the console should display an AuthData object with the fields { login: '', password: '', isRemember: '' }
import React from 'react'
import { useState } from 'react'
export const AuthForm = ({ handlers }) => {
const [authData, setAuthData] = useState({ login: '', password: '', isRemember: '' })
const changeValue = (event) => {
const { id, value } = event.target
setAuthData((prevAuthData) => ({ ...prevAuthData, [id]: value }))
}
const signIn = () => {
console.log(authData)
}
return (
<form onSubmit={(e) => e.preventDefault()}>
<input
type="text"
id="login"
placeholder="Login/E-mail/Phone"
value={authData.login}
onChange={changeValue}
/>
<input
type="password"
id="password"
placeholder="Password"
value={authData.password}
onChange={changeValue}
/>
<input
type="checkbox"
id="isRemember"
value={authData.isRemember}
onChange={changeValue}
/>
<button onClick={signIn}>Sign in</button>
</form>
)
}
When you change inputs values, their values must be passed to the authValue object.
With "login" and "password" inputs their values go into the authValue object, but with "isRemember" input this does not work. The value of checkbox inputs somehow does not get into the authValue object.

Answer 1

you can check the input type and get the checked value for checkbox from the event object as below
const changeValue = (event) => {
let { id, value, type, checked="" } = event.target;
if (type === "checkbox") {
value = checked;
}
setAuthData((prevAuthData) => ({ ...prevAuthData, [id]: value }));
};

Answer 2

You have to use the checked attribute on the checkbox input.
The value attribute is used, but you’ll have to modify it to ensure it sends true or false to the state object
I've added a snippet in response to your comment.
const {useState} = React
const AuthForm = ({ handlers }) => {
const [authData, setAuthData] = useState({ login: '', password: '', isRemember: false })
const changeValue = (event) => {
const { id, value } = event.target
setAuthData((prevAuthData) => ({ ...prevAuthData, [id]: value }))
}
const changeCheckbox = () => {
setAuthData((prevAuthData) => ({ ...prevAuthData, isRemember: !prevAuthData.isRemember }))
}
const signIn = () => {
console.log(authData)
}
console.log(authData);
return (
<form onSubmit={(e) => e.preventDefault()}>
<input
type="text"
id="login"
placeholder="Login/E-mail/Phone"
value={authData.login}
onChange={changeValue}
/>
<input
type="password"
id="password"
placeholder="Password"
value={authData.password}
onChange={changeValue}
/>
<input
type="checkbox"
id="isRemember"
checked={authData.isRemember}
onChange={changeCheckbox}
/>
<button onClick={signIn}>Sign in</button>
</form>
)
}
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(
<AuthForm />
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>