CODEWITHSUNDEEP
javascripthtmlreactjscheckboxreact-hooks
Nesh
Nesh

Reputation: 2551

Unable to change checkbox in react hooks

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>
  );
}

Edit priceless-herschel-wqxzk

Upvotes: 0

Views: 2196

Answers (4)

kodamace
kodamace

Reputation: 485

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

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

Upvotes: 0

kodamace
kodamace

Reputation: 485

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}
              />

Upvotes: 0

norbitrial
norbitrial

Reputation: 15166

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.

Upvotes: 1

user2340824
user2340824

Reputation: 2152

  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);
  };

Upvotes: 0

Related Questions