Dropdown List in React JS

React JS

In previous article we have explained Pure Component in React JS and today we will discuss about Dropdown List in React JS. Basically dropdown list is a combined data in the list format. Using dropdown list we can select data from a list then pass further processing. Dropdown list is used to select single data from multiple data list.

There are two types of dropdown list, which are as follows:

  • Static dropdown list
  • Dynamic dropdown list

Static Dropdown List

Static dropdown means data doesn’t fetch from the database or API.

import React from "react";
class DropdownList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedCourse: 'No course',
        }
    }

    handleChange = (e) => {
        this.setState({selectedCourse:e.target.value});
    }

    render() {
        const { selectedCourse } = this.state
        return (
            <div>
                <h2><u>Dropdown list in React JS</u></h2>
                <select value={selectedCourse} onChange={this.handleChange} >
                    <option value="No course">Select Course</option>
                    <option value="JavaScript">JavaScript</option>
                    <option value="React JS">React JS</option>
                    <option value="Node JS">Node JS</option>
                    <option value="Next JS">Next JS</option>
                    <option value="Vue JS">Vue JS</option>
                </select>
                <h4>The selected course is : {selectedCourse}</h4>
            </div>
        )
    }
}
export default DropdownList

Output

Dropdown List in React JS

In the above code we have wrote the many option tag under select tag. There are no any json data or data list. On the onChane function we have called handleChange function to get the selected value from the dropdown list.

Dynamic Dropdown List

Dynamic dropdown means data fetch from the database or API in the json format. In this example we will use json data list like as below example.

import React from "react";
class DynamicDropdownList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            courseData:  [
                {id: 'JavaScript', name: 'JavaScript'},
                {id: 'React JS', name: 'React JS'},
                {id: 'Node JS', name: 'Node JS'},
                {id: 'Next JS', name: 'Next JS'},
                {id: 'Vue JS', name: 'Vue JS'}
            ],
            selectedCourse: 'No course',
        }
    }

    handleChange = (e) => {
        this.setState({selectedCourse:e.target.value});
    }

    render() {
        const { courseData, selectedCourse } = this.state

        let courseList = courseData.length > 0
            && courseData.map((item, i) => {
                return (
                    <option key={i} value={item.id}>{item.name}</option>
                )
            });
        return (
            <div>
                <h2><u>Dropdown list in React JS</u></h2>
                <select value={selectedCourse} onChange={this.handleChange} >
                    <option value="No course">Select Course</option>
                    {courseList}
                </select>
                <h4>The selected course is : {selectedCourse}</h4>
            </div>
        )
    }
}
export default DynamicDropdownList

In the above code we have used json data list in the courseData variable to display dropdown list. Actually when we fetch data from the API then they returns json data same as we have used.

Output

dropdown list in react js

So in this tutorial we have explained two types of dropdown list in React JS i.e. static dropdown list and dynamic dropdown list. Using this tutorial anyone can easily understand dropdown list in React JS.

If you want to add something or improve this tutorial or find anything wrong or incorrect then please leave a message using below comment box

Leave a Reply

Your email address will not be published. Required fields are marked *

19 − twelve =