How To Use Dropdown And Radio Buttons In React

Introduction 

 

In this article we are going to learn how we use radio button and dropdown select in ReactJS. Radio button is a element that allows the user to select only one option from multiple options.

 

You can check my previous articles on Reactjs from the below mentioned links. 

• Add Reactstrap Components In ReactJS
• Toastr Notification In ReactJS
• Internationalization In ReactJS Application Using i18Next

Prerequisites

• We should have basic knowledge of React.js 
• Visual Studio Code IDE
• Bootstrap 

Create React.js Project

 

Lets create a new React.js project by using the following command. 

npx create-react-app formelement

Open the newly created project in Visual Studio Code and install Bootstrap in this project by using the following command.

npm install --save bootstrap

Now, open the index.js file and add Bootstrap reference.

 

import 'bootstrap/dist/css/bootstrap.min.css';

Now, right click on "src" folder and add a new component named 'Form.js.

 

In reactjs component, to auto generate code, we need to install react Snippets in Visual Studio code. React Snippets are found in the Visual Studio Code Extension Marketplace. Download React snippets using the following link or go to VS Code Extension and search 'React Snippets'

 

Now open Form component and type 'rce' to create a class component class and press the tab key, it generates code for this component. Now create a constructor by using 'rconst' snippets and add two state variables. 

constructor(props) {
              super(props)

              this.state = {
                      Technology: '',
                      Gender: ''

              }
      }

Now add two event handlers, one for radio button click and another from dropdwon select event.

Changetechnology = (e) => {
            this.setState({
                    Technology: e.target.value
            })
    }
    Changegender = (e) => {
            this.setState({
                    Gender: e.target.value
            })
    }

Add one more event handler for button click. When clicking on button this event is called. 

onsubmit = (e) => {
             e.preventDefault();
             alert(`${this.state.Technology},${this.state.Gender}`)
     }

Now in render method which returns a dropdown add two radio buttons.

render() {
              return (
                      <div>
                       <div class="row" className="hdr">
                         <div class="col-sm-12 btn btn-info">
                          Radio button and Dropdowns in React
                          </div>
                           </div>
                            <form onSubmit={this.onsubmit}>
                             <div className="form-group dropdn">
                              <select className="form-control" value={this.state.Technology} onChange={this.Changetechnology} >
                              <option value="1">Angular</option>
                               <option>React</option>
                                <option>JavaSript</option>
                                 <option>Vue</option>
                                 </select>
                                </div>
                              <div>
                              <input type="radio" value="Male" checked={this.state.Gender == "Male"} onChange={this.Changegender} />Male
                             <input type="radio" value="Female" checked={this.state.Gender == "Female"} onChange={this.Changegender} />Female
                              </div><br></br>
                              <button type="submit" className="btn btn-info" >Click</button>
                              </form>
                      </div>
              )
      }

Complete code

import React, { Component } from 'react'
import './App.css'
export class Form extends Component {
        constructor(props) {
                super(props)

                this.state = {
                        Technology: '',
                        Gender: ''

                }
        }
        Changetechnology = (e) => {
                this.setState({
                        Technology: e.target.value
                })
        }
        Changegender = (e) => {
                this.setState({
                        Gender: e.target.value
                })
        }
        onsubmit = (e) => {
                e.preventDefault();
                alert(`${this.state.Technology},${this.state.Gender}`)
        }

        render() {
                return (
                        <div>
                         <div class="row" className="hdr">
                           <div class="col-sm-12 btn btn-info">
                            Radio button and Dropdowns in React
                            </div>
                             </div>
                              <form onSubmit={this.onsubmit}>
                               <div className="form-group dropdn">
                                <select className="form-control" value={this.state.Technology} onChange={this.Changetechnology} >
                                <option>Angular</option>
                                 <option>React</option>
                                  <option>JavaSript</option>
                                   <option>Vue</option>
                                   </select>
                                  </div>
                                <div>
                                <input type="radio" value="Male" checked={this.state.Gender == "Male"} onChange={this.Changegender} />Male
                               <input type="radio" value="Female" checked={this.state.Gender == "Female"} onChange={this.Changegender} />Female
                                </div><br></br>
                                <button type="submit" className="btn btn-info" >Click</button>
                                </form>
                        </div>
                )
        }
}

export default Form

Open app.js file and add the following code in this file,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form';

function App() {
  return (
    <div className="App">
      <Form></Form>
    </div>
  );
}

export default App;

Now run the project by using 'npm start' command,

 

Select a value from dropdwon and check a radio button and click on button and check 

 

 

Summary

 

In this article we learned how we use dropdown and radio button in React.js applications. We also checked how we add React snippets in Visual Studio code. In the next article we will discuss all available snippets. By using these snippets we can save time in development.