Code Playground.

Introduction 

While working with a web application, you may need to utilize different structure controls, for example, content boxes, checkboxes, dropdowns, document transfers, or radio fastens so as to utilize HTML components or outsider libraries for React, for example, material-ui. 

Right now, get familiar with the rudiments of the radio catch, how to utilize it in a gathering, and how to get to the chose radio catch an incentive on change occasion. 

Using a Radio Button Group 

Radio catches let a client pick a solitary choice from a rundown of various radio fastens and present its worth. 

For instance, here's the manner by which to utilize radio catches without a structure:

render() {
    return (
      <div>
        <input type="radio" value="Male" name="gender" /> Male
        <input type="radio" value="Female" name="gender" /> Female
        <input type="radio" value="Other" name="gender" /> Other
      </div>
    );
  }

In this example, there are three radio buttons and one additional property called gender.

Because that name property puts all the radio buttons into a group, you can get the value once the user selects any of them, as explained below.

import React, { Component } from "react";

class Demo1 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
    this.onChangeValue = this.onChangeValue.bind(this);
  }

  onChangeValue(event) {
    console.log(event.target.value);
  }

  render() {
    return (
      <div onChange={this.onChangeValue}>
        <input type="radio" value="Male" name="gender" /> Male
        <input type="radio" value="Female" name="gender" /> Female
        <input type="radio" value="Other" name="gender" /> Other
      </div>
    );
  }
}

export default Demo1;

The function onChangeValue() is attached with div so as soon as the user selects any radio button, it will be reflected in the function.

Using a Radio Button Group with a Form

The previous example used radio buttons with a change action, but you can also use radio button groups with a form.

Set up a form with a radio button group like this.

render() {
    return (
      <form onSubmit={this.formSubmit}>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Male"
              checked={this.state.selectedOption === "Male"}
              onChange={this.onValueChange}
            />
            Male
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Female"
              checked={this.state.selectedOption === "Female"}
              onChange={this.onValueChange}
            />
            Female
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Other"
              checked={this.state.selectedOption === "Other"}
              onChange={this.onValueChange}
            />
            Other
          </label>
        </div>
        <div>
          Selected option is : {this.state.selectedOption}
        </div>
        <button className="btn btn-default" type="submit">
          Submit
        </button>
      </form>
    );
  }

As you can see in the above example, in the form there are three different radio buttons along with the submit button, and each radio button is attached with one onChange function, called onValueChange().

onValueChange(event) {
    this.setState({
      selectedOption: event.target.value
    });
  }

The onChangeValue() work gets considered when the client chooses the radio catch from the gathering, and the worth is refreshed into the part state. 

At the point when the client is finished with the determination, they might need to present the structure. The submit strategy is called formSubmit()

formSubmit(event) {
    event.preventDefault();
    console.log(this.state.selectedOption)
  }

Once the user submits the form, pass the state values to the API endpoint to post or update the data.

The complete example should look like this.

import React, { Component } from "react";

class Demo2 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
    this.onValueChange = this.onValueChange.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  onValueChange(event) {
    this.setState({
      selectedOption: event.target.value
    });
  }

  formSubmit(event) {
    event.preventDefault();
    console.log(this.state.selectedOption)
  }

  render() {
    return (
      <form onSubmit={this.formSubmit}>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Male"
              checked={this.state.selectedOption === "Male"}
              onChange={this.onValueChange}
            />
            Male
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Female"
              checked={this.state.selectedOption === "Female"}
              onChange={this.onValueChange}
            />
            Female
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Other"
              checked={this.state.selectedOption === "Other"}
              onChange={this.onValueChange}
            />
            Other
          </label>
        </div>
        <div>
          Selected option is : {this.state.selectedOption}
        </div>
        <button className="btn btn-default" type="submit">
          Submit
        </button>
      </form>
    );
  }
}

export default Demo2;

This complete example used a radio button group with the form. As soon as the user submits the form, the value will be used for the API endpoint communication. The checked property of the radio button is responsible to selected it once it finds the suitable value from the current state.

Radio Buttons from Third-party Libraries

You can use HTML input with the type as radio button. If you need to use different styling, make use of some third-party libraries that provide radio button elements:

• material-ui
• react-radio-buttons
• react-radio-button
• react-radio-button-group
• react-radio-group

Conclusion

This guide disclosed how to utilize radio fastens as a gathering, how to utilize them with a structure component, and where to discover radio catches from different outsider sources. 

That is the intensity of overseeing structures with radio catch gatherings. I trust this guide was useful to you.