React JS Checkbox onchange Event Example

This example is focused on checkbox onchange event in react js. if you want to see example of react js checkbox example then you are a right place. In this article, we will implement a checkbox in react js example. i would like to share with you how to use checkbox in react js.

If you are new in react js then you want to see how to use checkbox in react app. but it's very easy to use checkbox input in react js app. you can use it as you use in html and you have to write change event on it. using that change event you have to store value into form state. so you can get that data on submit.

In this example, we will take simple "i_agree" with checkbox input and add onchange event with handleChange() then we will assign value on state variable array. Then on submit event we will take that values with state variable.

So, let's see bellow preview and code:

Example Code:

import React, { Component } from 'react';
import { render } from 'react-dom';
      
class App extends Component {
  constructor() {
    super();
    this.state = {
      i_agree: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
    this.setState({i_agree: !this.state.i_agree});
  }
     
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
     
  render() {
    return (
      <div>
        <h1>React Checkbox onChange Example - HDTuto.com</h1>
        <form onSubmit={this.handleSubmit}>
           
          <label>
            <input
              type="checkbox"
              defaultChecked={this.state.i_agree}
              onChange={this.handleChange}
            /> I Agree with this content...
          </label>
           
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

Output:

{i_agree: true}

I hope it can help you...