React 18 Select Dropdown onChange Event Handler Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

React Select onChange event handler example. A React front-end developer must be well-versed in working with form elements.

Form has many components; the Select dropdown element is partially used to get information from the users.

In React, you can use the select dropdown to create a list of options.

It gives flexibility to users to select either of the options from the given options lists. A select element can be invoked using on change event handler.

This tutorial will help you learn how to build a select dropdown list.

Not only but also how to attach the onChange event handler to the select dropdown in React to retrieve the select option values.

We will create a fruit list to handle the onChange event on a Select UI element in React.

Set the onChnage event on the select’s options property; bind it in conjunction with React initial state and insert the select option value in React state when the select element’s value changes.

We’ll show you a complete demo of this React select onChange tutorial with a functional component.

As soon as you fire the onChange event, it will return the selected value, and we can show the select element value on the browser.

Install New React App

Open the code editor of your choice, run the terminal app on the terminal’s console type the given command.

These commands will install a new React app as well as land you in the project folder.

npx create-react-app react-demo

cd react-demo

Add Bootstrap Library

Bootstrap library helps you design the HTML components in very less time. You can add it into your React app using the given command.

npm install bootstrap --legacy-peer-deps

Build New Component

Create components/Select.js file, this will allow you to create React Select component separately.

import React from 'react'

function Select() {
  return (
    <div></div>
  )
}

export default Select

Set and Get Selected Value with onChange

We are using the useState hook to set the value of the selected option; initially, we passed nothing in starting state because we wanted to keep no value.

We set certain values within the option property, and any value can be selected when onChange is invoked.

Update code in components/Select.js file.

import React from "react";

const Select = () => {
  const [selectValue, setSelectValue] = React.useState("");

  const onChange = (event) => {
    const value = event.target.value;
    setSelectValue(value);
  };

  return (
    <div>
      <h2 className="mb-3">React Select onChange Example</h2>
      <select onChange={onChange} className="form-select">
        <option defaultValue disabled>
          Select Fruit
        </option>
        <option value="Apples">Apples</option>
        <option value="Grape">Grape</option>
        <option value="Bananas">Bananas</option>
        <option value="Blueberries">Blueberries</option>
        <option value="Melons">Melons</option>
      </select>
      {selectValue && <h2 className="mt-3">{selectValue}</h2>}
    </div>
  );
};

export default Select;

Update App Js Component

Open the App.js file, and do following things:

Import the bootstrap CSS path, and import the Select component within the App function.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Select from "./components/Select";

function App() {
  return (
    <div className="container mt-3">
      <Select />
    </div>
  );
}

export default App;

Start Development Server

The following command runs the development server; the terminal window will show some URLs that you can use to view the app.

npm start