Checkboxes in ReactJS

Question

I don't understand checkboxes in ReactJS. I found this question but it has a ton of upvoted answers where everyone is doing something else. Some answers use checked={isCheckedState}, which however for me throws uncontrolled input error. Other use defaultChecked, which removes the uncontrolled error but then the checkbox won't change. Some have no value attribute but when I don't have that, the e.target.value always returns the string "on".

Can someone please explain to me how checkboxes REALLY should be handled in ReactJS?

const [checkBox, setCheckbox] = useState(false); //default unchecked


const handleCheckbox = (val) => {
    setCheckbox(!val); //toggle
    console.log(val, checkBox);
}

render(
            <input 
                id="check"
                type="checkbox"
                value={checkBox} //if I remove this, "val" always contains "on"
                defaultChecked={checkBox}
                onChange={e => handleCheckbox(e.target.value)} 
            />
);

adir abargil · Accepted Answer · 2020-09-30 13:24:08Z

1

you skipped the fact that they are not using e.target.value... :

<input 
    id="check"
    type="checkbox"
    checked={checkBox} //if I remove this, "val" always contains "on"
    onChange={e => handleCheckbox(!checkBox)} 
/>

in addition u can use checked instead of value like this:

onChange={e => handleCheckbox(e.target.checked)}

edited Sep 30, 2020 at 13:24

answered Sep 30, 2020 at 13:19

adir abargil

5,7453 gold badges23 silver badges29 bronze badges

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

Comments

A.R.SEIF · Accepted Answer · 2020-09-30 13:24:54Z

1

This will help you understand how it works!

    const [checkBox, setCheckbox] = useState(false);

    useEffect(() => {
        console.log("Hey Checkbox Checked ?", checkBox);
    }, [checkBox]);

    const handleCheckbox = () => {
        setCheckbox(!checkBox);
    }

    return (
        <input
            id="check"
            type="checkbox"
            checked={checkBox}
            onChange={handleCheckbox}
        />
    );

edited Sep 30, 2020 at 13:24

A.R.SEIF

8731 gold badge8 silver badges28 bronze badges

answered Sep 30, 2020 at 13:22

Veno

4453 silver badges15 bronze badges

5 Comments

user6329530 Over a year ago

Changing defaultChecked into checked causes uncontrolled input error to be thrown: Warning: A component is changing an uncontrolled input of type number to be controlled. BTW on a side note, if you don't plan to pass e to the handler function, you don't need e => and () and can just write onChange={handleCheckbox}

Veno Over a year ago

You can use both checked and defaultChecked in this case, whenever any value is changed, this will toggle the state, so as the value for checked and defaultChecked

Veno Over a year ago

Updated the unwanted callback function to my answer!

user6329530 Over a year ago

Yes but it still throws the error when I don't use defaultChecked

Veno Over a year ago

Does this solve you problem? Solution

John Salzman · Accepted Answer · 2020-09-30 13:58:05Z

Each input box value will be stored in the state. If you have many, you could store these inside of an array, but since you just have one, you can store it in just a variable, in your case called 'checkBox'

Now come the updating part of it. What most people do is they just set the new to the opposite of the new state.

With State Hooks

onChange={() => setChecked(!checkBox)}

With Classes

onChange={() => this.setState({
      checkBox: !this.state.checkBox,
    });}

You can also use events

  const handleCheckbox = (event) => {
    if (event.target.value === "true") {
      setCheckbox(false); //toggle
    } else {
      setCheckbox(true); //toggle
    }
    console.log(event.target.value, checkBox);
  };

    
onChange={handleCheckbox}

I recommend using state hooks if you are using a function

Collectives™ on Stack Overflow

Checkboxes in ReactJS

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related