title: reactjs checkbox boolean value
body: <p>Im new in reactjs hooks, I am having difficulties on sending the checkbox value (boolean) to the state. I have a state that store email (empty string) , password(empty string) and loginTime (boolean 'true'). I am able to store email and password but I am unable to store the checkbox value into the state. If I unchecked the checkbox, the state will return only boolean false without parameter email and password.</p>
  
  <p>Thank you, and sorry english is not my first language.</p>
  
  <p>checks:
  <a href="https://imgur.com/6VjzJxD" rel="nofollow noreferrer">https://imgur.com/6VjzJxD</a></p>
  
  <p>uncheck:
  <a href="https://imgur.com/9nbMzgn" rel="nofollow noreferrer">https://imgur.com/9nbMzgn</a></p>
  
  <p>code as per below:</p>
  
  <pre><code>const Login = (props) =&gt; {
  const [values, setValues] = useState({
      email: "",
      password: "",
      loginTime: true
    });
  
    const onChange = (event) =&gt; {
      setValues({ ...values, [event.target.name]: event.target.value });
  
    };
  
    const onSubmit = (e) =&gt; {
      e.preventDefault();
      console.log(values)
    };
  
  
    return (
      &lt;&gt;
        &lt;section className="main"&gt;
          &lt;div className="content-w3ls right"&gt;
            &lt;div className="container"&gt;
              &lt;div className="header-sign"&gt;
                &lt;p&gt;Sign in&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;form onSubmit={onSubmit} method="post"&gt;
                  &lt;div className="txtLabel"&gt;
                    &lt;label&gt;Email address&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className="field-group"&gt;
                    {/* &lt;label&gt;Email address&lt;/label&gt; */}
  
                    &lt;span className="fa fa-user" aria-hidden="true"&gt;&lt;/span&gt;
  
                    &lt;div className="wthree-field"&gt;
                      &lt;input
                        name="email"
                        id="email"
                        type="email"
                        // placeholder="Email"
                        required
                        value={values.email}
                        onChange={onChange}
                      &gt;&lt;/input&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="txtLabel"&gt;
                    &lt;label&gt;Password&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className="field-group"&gt;
                    &lt;span className="fa fa-lock" aria-hidden="true"&gt;&lt;/span&gt;
                    &lt;div className="wthree-field"&gt;
                      &lt;input
                        name="password"
                        id="myInput"
                        type="Password"
                        value={values.username}
                        required
                        onChange={onChange}
                      &gt;&lt;/input&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className="checklayout"&gt;
                    &lt;div&gt;
                      &lt;input type="checkbox" id="check" values={values.loginTime} checked={values.loginTime} onChange={() =&gt; setValues(!values.loginTime)}&gt;&lt;/input&gt;
                      &lt;span className="span-me"&gt;Remember Me&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;div&gt;
                        &lt;a
                          href="#"
                          className="text-right"
                          style={{ textDecoration: "none", fontSize: "14px" }}
                        &gt;
                          Forgot your password?
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className="wthree-field"&gt;
                    &lt;button type="submit" className="btn"&gt;
                      {loading ? "Loading..." : "Sign In"}
                    &lt;/button&gt;
                  &lt;/div&gt;
  }
  
  export default Login;
  </code></pre>