Site icon RemoteStack

How to Add and Use Radio Buttons in React Js App

React Radio Button integration and usage tutorial; All the modern web and mobile applications are incomplete without forms, and form helps to get and store the user-provided data on the server.

A form comprises various form controls such as text input, text boxes, select dropdown, checkboxes, input file type and most importantly, radio buttons.

A radio button, preferentially known as the option button, is a common graphical user interface control element that let the user choose a single value from the other given options.

Theoretically, it is an HTML form element; when a user doesn’t select the radio button, there is no name-value submitted when the user clicks on the submit button.

In this React radio buttons tutorial, we will describe how to implement radio buttons in react app’s form. How to create a radio button group, use a radio button group within the form, set a radio button selected state, and add an event handler to a radio button in react from scratch.

How to Use Radio Buttons in React

Install React Project

In the first step, you need to open the terminal, type the command to start installing a latest version of react.

npx create-react-app react-radio-button-example

Move inside the app directory:

cd react-radio-button-example

Setting Up React State

Eventually, we have reached the essential step where we learn to set the state for the radio button group in our react example. Let us ascertain what state is?

Ideally, a state is a JavaScript object which holds a component’s dynamic data and manages the component’s behaviour dynamically. Generically, it tracks the invariably changing information and fundamentally appropriated inside a class component.

constructor() {
    super();

    this.state = {
      name: ''
    };
}

Create Radio Button Group

As we have explained earlier radio button group formulates an array of options from which you may choose a single value; here is the method through which you can understand how to add and use radio buttons in react component.

render() {
    return (
      <div className="App">
        <form>
              <label>
                <input
                  type="radio"
                  value="Forest Gump"
                  checked={this.state.name === "Forest Gump"}/>
                    <span>Forest Gump</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Die Hard"
                  checked={this.state.name === "Die Hard"}/>
                    <span>Die Hard</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Star Wars"
                  checked={this.state.name === "Star Wars"}/>
                    <span>Star Wars</span>
              </label>
        </form>
      </div>
    );
}

Radio Button Selected State in React

The state object allows you to set the radio button’s selected state in react; let us get inside the constructor() method and define the movie name to enable the selected state.

import React, { Component } from 'react';


class App extends Component {

  constructor() {
    super();
    this.state = {
      name: 'Forest Gump'
    };
  }

  render() {
    return (
      <div className="App">
        <form>
              <label>
                <input
                  type="radio"
                  value="Forest Gump"
                  checked={this.state.name === "Forest Gump"}/>
                    <span>Forest Gump</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Die Hard"
                  checked={this.state.name === "Die Hard"}/>
                    <span>Die Hard</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Star Wars"
                  checked={this.state.name === "Star Wars"}/>
                    <span>Star Wars</span>
              </label>
        </form>
      </div>
    );
  }
}

export default App;

Integrate Radio Button Group in Form

Finally, we have collected all the code to integrate radio button inside a form, not just that we have also defined the event handler for handling the radio buttons.

In the given code snippet, we have conjugated all the code to implement the radio button group. The onSubmitForm() form invokes when the user chooses the radio button option and clicks on the submit button.

import React, { Component } from 'react';

class App extends Component {

  constructor() {
    super();
    this.state = {
      name: 'Forest Gump'
    };

    this.onValChange = this.onValChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }

  onValChange = (event) => {
    this.setState({
      name: event.target.value
    });
  }

  onSubmitForm = (event) => {
    event.preventDefault();
    console.log(this.state.name);
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmitForm}>

              <label>
                <input
                  type="radio"
                  value="Forest Gump"
                  checked={this.state.name === "Forest Gump"}
                  onChange={this.onValChange}/>
                    <span>Forest Gump</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Die Hard"
                  checked={this.state.name === "Die Hard"}
                  onChange={this.onValChange}/>
                    <span>Die Hard</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Star Wars"
                  checked={this.state.name === "Star Wars"}
                  onChange={this.onValChange}/>
                    <span>Star Wars</span>
              </label>

              <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

Start React App

The start script has already added inside the pacakge.json file further; to run the react development server, you must execute the npm start command from the terminal and start your application.

npm start

Here is the url that lets you view the app on the browser.

http://localhost:3000
Exit mobile version