Unable to change checkbox in react hooks

Question

I started learning React hooks, but I am stuck with a basic behavior of checkbox. I simply want to toggle my checkbox on click / change. Let me know what I am doing wrong here.

Code -

import React from "react";
import "./styles.css";

export default function App() {
  const [checked, setChecked] = React.useState(true);

  const handleChange = e => {
    e.persist();
    console.log(e.target.checked);
    setChecked({ checked: !e.target.checked });
  };

  return (
    <div className="App">
      <div className="container">
        <div className="list">
          <div className="search">Search</div>
          <div className="list">
            <ul>
              <input
                type="checkbox"
                checked={checked}
                onChange={handleChange}
                onClick={handleChange}
              />
            </ul>
            {JSON.stringify(checked)}
          </div>
        </div>
      </div>
    </div>
  );
}

You have extra "!". setChecked({ checked: e.target.checked }); should solve the problem — karianpour
– karianpour, Commented Jul 24, 2020 at 20:06
Just so you know you were setting state as an object property { checked } which overrode your boolean state. if you ever have to do this in the future, and set the state object properly, make sure you call it by the object property on your input which is checked.checked in this case. I would advise you to make it as simple as possible though so you don't have to ever access an object property. — MrAmazing
– MrAmazing, Commented Jul 24, 2020 at 20:25

norbitrial · Accepted Answer · 2020-07-24 20:00:11Z

1

The main problem is you are firing the handleChange function two times.

Using the previous state of your checked state as:

const handleChange = e => {
   e.persist();
   setChecked(prevState => !prevState);
};

And also removing onChange from your input element as:

<input type="checkbox" checked={checked} onClick={handleChange} />

Just tested this solution and seemed to be working fine.

answered Jul 24, 2020 at 20:00

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nesh Over a year ago

Thanks a lot for sharing the actual root cause

MrAmazing Over a year ago

You should leave this as onChange. There are other ways other than clicking to change a checkbox which will make this not fire. If Nesh doesn't check for the value of the checkbox and just does a !state it can save the wrong state of the checkbox.

user2340824 · Accepted Answer · 2020-07-24 19:59:25Z

0

  const handleChange = e => {
    e.persist();
    console.log(e.target.checked);
    setChecked({ checked: !e.target.checked });
  };

This is failing because you are setting checked to an Object but you initialise the state with a boolean

   const [checked, setChecked] = React.useState(true);

Changing it to this, should work

  const handleChange = e => {
    setChecked(prevValue => !prevValue);
  };

answered Jul 24, 2020 at 19:59

user2340824

2,1522 gold badges15 silver badges19 bronze badges

Comments

kodamace · Accepted Answer · 2020-07-24 20:03:22Z

if your trying to just toggle checked or not checked, checkbox default is set you just have to return the checkbox as below, from what i can see your setting checked={checked}

     <div className="App">
          <div className="container">
            <div className="list">
              <div className="search">Search</div>
              <div className="list">
                <ul>
                  <input
                    type="checkbox"
                  />
                </ul>
                {JSON.stringify(checked)}
              </div>
            </div>
          </div>
        </div>




or you could also do the following what i do sometimes, if im doing anything wrong i would love to be corrected.

 const handleChange = e => {
    setChecked(!checked);
  };

<input
                type="checkbox"
                onChange={handleChange}
              />

kodamace · Accepted Answer · 2020-07-24 20:46:11Z

0

another thing you could do is add the following to the handle check

if(checked === true) {
  setChecked(false)
}else {
  setChecked(true)
}

answered Jul 24, 2020 at 20:46

kodamace

4853 silver badges9 bronze badges

Collectives™ on Stack Overflow

Unable to change checkbox in react hooks

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related