onChange function on checkbox isn't working | ReactJS

Question

I'm learning ReactJS and today I can't resolve a difficulty, so I need your help.

I want to make a "Remember Me" for users that want to stay connected after reopening the website.

This is my code :

My function :

handleChangeCheckBox = (event) => {
  console.log(event.target.checked)

  this.setState({
    isChecked: event.target.checked
  })
}

When I call the function in the input checkbox field with an onChange :

<p>
  <Input
    type="checkbox"
    name="rememberCheckbox"
    className="rememberCheckbox"
    id={this.state.isChecked}
    onChange={this.handleChangeCheckBox}
  />
  Remember Me
</p>

Nothing appears in my console when I click on the checkbox, so it seems like the calling function isn't working.

Look like you are using UI kit, or you should change `````` to `````` — Cong Nguyen, Jan 16 '20 at 10:59
Please refer link for this issue https://stackoverflow.com/questions/26615779/react-checkbox-not-sending-onchange — Dinshaw Raje, Jan 16 '20 at 10:59
Did you find a solution? I am having the same problem. my state changes when I click on it but doesn't show in the checkbox — lumayara, Jun 22 '20 at 18:28

score 3 · Answer 1 · answered Mar 17 '20 at 06:11

3

please try this. replace value with checked

<input type="checkbox" 
    name="rememberCheckbox"
    checked={this.state.isChecked}
    onChange={this.handleCheckBox}
/>

answered Mar 17 '20 at 06:11

Yong Karyeun

39
3

Dinshaw Raje · Answer 2 · 2020-01-16T11:32:14.040

1

Code tested at given url enter link description here

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isChecked: false };
  }

  handleCheckBox = event => {
    console.log(event.target.checked);

    this.setState({
      isChecked: event.target.checked
    });
  };

  render() {
    return (
      <div>

       <p>
          <input
            type="checkbox"
            name="rememberCheckbox"
            value={this.state.isChecked}
            onChange={this.handleCheckBox}
          />
          Remember Me
        </p>
      </div>
    );
  }
}

edited Jan 16 '20 at 11:32

answered Jan 16 '20 at 10:58

Dinshaw Raje

933
1
12
33

Hello, thanks for your reply. Your solution isn't working, but thanks for your help ! – TheTMJ Jan 16 '20 at 11:05
Your code is working at the url you gave but on mine, when I correct everything it doesn't work – TheTMJ Jan 16 '20 at 12:00

score 0 · Answer 3 · answered Jan 16 '20 at 11:04

Welcome to Stack overflow!

Based on the code you shared, your function should be getting executed. I suspect you have an error somewhere else in your class rather than in those two code snippets you shared.

You can check this simple sandbox I made with a very barebones implementation like the one you have: https://codesandbox.io/s/react-simple-check-box-7etp4

One thing you're missing is using the checked html attribute rather than id. That's what will tell the checbox whether it's checked or not. It replaces the value attribute you use for input fields.

You also seem to be using an Input component. Try changing it for a normal HTML input instead.

score 0 · Answer 4 · answered Jul 03 '20 at 17:46

it could be triggering twice.

if you are using create-react-app then your Appcomponent is wrapped in StrictMode like this:

<React.StrictMode>
  <App />
</React.StrictMode>,

go to index.js and remove <React.StrictMode></React.StrictMode>

https://github.com/facebook/react/issues/12856#issuecomment-390206425

score 0 · Answer 5 · answered Jul 05 '22 at 16:03

0

handleChangeCheckBox = () => { this.setState({ isChecked: ! this.state.isChecked }) }

answered Jul 05 '22 at 16:03

يوسف اللاذقية

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 06 '22 at 11:13

onChange function on checkbox isn't working | ReactJS

5 Answers5