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.
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.
  1. 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.
  1. npm install --save bootstrap
Now, open the index.js file and add Bootstrap reference.
  1. 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.
  1. constructor(props) {
  2. super(props)
  4. this.state = {
  5. Technology: '',
  6. Gender: ''
  8. }
  9. }
Now add two event handlers, one for radio button click and another from dropdwon select event.
  1. Changetechnology = (e) => {
  2. this.setState({
  3. Technology: e.target.value
  4. })
  5. }
  6. Changegender = (e) => {
  7. this.setState({
  8. Gender: e.target.value
  9. })
  10. }
Add one more event handler for button click. When clicking on button this event is called.
  1. onsubmit = (e) => {
  2. e.preventDefault();
  3. alert(`${this.state.Technology},${this.state.Gender}`)
  4. }
Now in render method which returns a dropdown add two radio buttons.
  1. render() {
  2. return (
  3. <div>
  4. <div class="row" className="hdr">
  5. <div class="col-sm-12 btn btn-info">
  6. Radio button and Dropdowns in React
  7. </div>
  8. </div>
  9. <form onSubmit={this.onsubmit}>
  10. <div className="form-group dropdn">
  11. <select className="form-control" value={this.state.Technology} onChange={this.Changetechnology} >
  12. <option value="1">Angular</option>
  13. <option>React</option>
  14. <option>JavaSript</option>
  15. <option>Vue</option>
  16. </select>
  17. </div>
  18. <div>
  19. <input type="radio" value="Male" checked={this.state.Gender == "Male"} onChange={this.Changegender} />Male
  20. <input type="radio" value="Female" checked={this.state.Gender == "Female"} onChange={this.Changegender} />Female
  21. </div><br></br>
  22. <button type="submit" className="btn btn-info" >Click</button>
  23. </form>
  24. </div>
  25. )
  26. }
Complete code
  1. import React, { Component } from 'react'
  2. import './App.css'
  3. export class Form extends Component {
  4. constructor(props) {
  5. super(props)
  7. this.state = {
  8. Technology: '',
  9. Gender: ''
  11. }
  12. }
  13. Changetechnology = (e) => {
  14. this.setState({
  15. Technology: e.target.value
  16. })
  17. }
  18. Changegender = (e) => {
  19. this.setState({
  20. Gender: e.target.value
  21. })
  22. }
  23. onsubmit = (e) => {
  24. e.preventDefault();
  25. alert(`${this.state.Technology},${this.state.Gender}`)
  26. }
  28. render() {
  29. return (
  30. <div>
  31. <div class="row" className="hdr">
  32. <div class="col-sm-12 btn btn-info">
  33. Radio button and Dropdowns in React
  34. </div>
  35. </div>
  36. <form onSubmit={this.onsubmit}>
  37. <div className="form-group dropdn">
  38. <select className="form-control" value={this.state.Technology} onChange={this.Changetechnology} >
  39. <option>Angular</option>
  40. <option>React</option>
  41. <option>JavaSript</option>
  42. <option>Vue</option>
  43. </select>
  44. </div>
  45. <div>
  46. <input type="radio" value="Male" checked={this.state.Gender == "Male"} onChange={this.Changegender} />Male
  47. <input type="radio" value="Female" checked={this.state.Gender == "Female"} onChange={this.Changegender} />Female
  48. </div><br></br>
  49. <button type="submit" className="btn btn-info" >Click</button>
  50. </form>
  51. </div>
  52. )
  53. }
  54. }
  56. export default Form
Open app.js file and add the following code in this file,
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import Form from './Form';
  6. function App() {
  7. return (
  8. <div className="App">
  9. <Form></Form>
  10. </div>
  11. );
  12. }
  14. export default App;
Now run the project by using 'npm start' command,
How To Use Dropdown And Radio Buttons In React
Select a value from dropdwon and check a radio button and click on button and check
How To Use Dropdown And Radio Buttons In React

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.