React Radio Button onchange | React Radio Button

Hello Devs,

In this tutorial, we are going to learn how to use radio button in react js.

Given below is the example code and the output:

Example Code:

import React, { Component } from 'react';
import { render } from 'react-dom';
      
class App extends Component {
  constructor() {
    super();
    this.state = {
      gender: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
    
  handleChange(event) {
    this.setState({gender: event.target.value});
  }
    
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
    
  render() {
    return (
      <div>
        <h1>React Radio Buttons onChange Example - Rathorji.in</h1>
        <form onSubmit={this.handleSubmit}>
          
          <strong>Select Gender:</strong>
          <label> 
            <input
              type="radio"
              value="male"
              onChange={this.handleChange}
            />Male
          </label>
          <label> 
            <input
              type="radio"
              value="female"
              onChange={this.handleChange}
            />Female
          </label>
          
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
  
render(<App />, document.getElementById('root'));

OUTPUT:

I hope this example helps you.