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 <Input/> to <input/> — Cong Nguyen
– Cong Nguyen, Commented Jan 16, 2020 at 10:59
Please refer link for this issue stackoverflow.com/questions/26615779/… — Dinshaw Raje
– Dinshaw Raje, Commented Jan 16, 2020 at 10:59

Yong Karyeun · Accepted Answer · 2020-03-17 06:11:19Z

6

please try this. replace value with checked

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

answered Mar 17, 2020 at 6:11

Yong Karyeun

691 silver badge3 bronze badges

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

Comments

Dinshaw Raje · Accepted Answer · 2020-01-16 11:32:14Z

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, 2020 at 11:32

answered Jan 16, 2020 at 10:58

Dinshaw Raje

9631 gold badge12 silver badges35 bronze badges

2 Comments

TheTMJ Over a year ago

Hello, thanks for your reply. Your solution isn't working, but thanks for your help !

TheTMJ Over a year ago

Your code is working at the url you gave but on mine, when I correct everything it doesn't work

Obed Parlapiano · Accepted Answer · 2020-01-16 11:04:18Z

0

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.

answered Jan 16, 2020 at 11:04

Obed Parlapiano

3,7703 gold badges25 silver badges40 bronze badges

Comments

Dory Daniel · Accepted Answer · 2020-07-03 17:46:22Z

0

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

answered Jul 3, 2020 at 17:46

Dory Daniel

82617 silver badges23 bronze badges

Comments

يوسف اللاذقية · Accepted Answer · 2022-07-05 16:03:48Z

0

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

answered Jul 5, 2022 at 16:03

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

1

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

onChange function on checkbox isn't working | ReactJS

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related