ReactJS- Radio Button "onClick" event is not triggered

Question

I am so newbie in ReactJs. I know this is a basic question but I could not manage triggering an event on radio button. In my web page, I have two radio button for Gender information.Name of this radio buttons are same.

When user clicks on the radio button, I want to set the my state value. I tried all solutions mentioned in web but I can not set the gender value.

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class App extends Component {
  constructor(props) {
    super(props)
    this.renderGender = this.renderGender.bind(this)
    this.setGender = this.setGender.bind(this)
    this.state = {
      loading: false,
      error: false,
      form: {},
      gender: 'male'
    }
  }

  setGender(e) {
    this.setState({
      gender: e.target.value
    })
  }

  render() {
    return (
      <div className="container main">
        {this.state.error ? (
          <div className="alert alert-danger" role="alert">
            Error
          </div>
        ) : null}
        <div className="row form-container">
          <div className="col-md-7">
            <div className="jumbotron jumbotron-fluid">
              <div className="container">. . .</div>
            </div>
          </div>
          <div className="col-md-5">
            <form id="register-form" method="POST" onSubmit={this.onSubmit} autoComplete="off">
              <input type="hidden" autoComplete="off" disabled />
              {this.renderGender()}
            </form>
          </div>
        </div>
      </div>
    )
  }

  renderGender() {
    return (
      <div>
        <label htmlFor="">Gender</label>
        <input type="radio" onClick={this.setGender} value="FEMALE" defaultChecked name="gender" /> Female
        <input type="radio" onClick={this.setGender} value="MALE" name="gender" /> Male
      </div>
    )
  }
}

App.propTypes = {}

export default App

My setGender method is not called when user clicks on the radio buttons.What is my mistake in this code ?

Answer 1

If you want to save state variable of gender as integer, you may handle that in the handleChange() function like below :

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      gender: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value === "male" ? 1 : 0 });
  }

  render() {
    const GENDER_TYPE = {
      1: "male",
      0: "female"
    };

    return (
      <div className="App">
        <h1>Radio batton example</h1>
        <label>
          <input
            type="radio"
            name="gender"
            value="male"
            checked={this.state.gender === 1}
            onChange={this.handleChange}
          />{" "}
          Male
        </label>
        <br />
        <label>
          <input
            type="radio"
            name="gender"
            value="female"
            checked={this.state.gender === 0}
            onChange={this.handleChange}
          />{" "}
          Female
        </label>

        <p>Chosen gender: {GENDER_TYPE[this.state.gender]}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

So, the value of the radio button tag, still string as "male" and "female", but converted to integer at handleChange() function , and save it to state as integer.

Live Example:

Answer 2

Change onClick to onChange in input radio buttons

Eg: Change

   <input type="radio" onClick={this.setGender} value="FEMALE" defaultChecked name="gender" />

To

   <input type="radio" onChange={this.setGender} value="FEMALE" defaultChecked name="gender" />