Understanding The React Select Dropdown OnChange Event Handler

A lot of developers who are new to React have trouble figuring out how to use the onChange event listener with react select dropdown. In this article, I'll show you a few different ways to use that event listener and what you need to know about each one.

This event listener is used to handle changes and updates in the value of a select dropdown. When a user chooses a new option in the dropdown, the value is updated in your application state. This change can be used to trigger different actions or events within your app.

This is a quick demo on how to create a React Select dropdown and fire an action on change.

Install New React App

First, install create-react-app. The command is:

npx create-react-app react-demo

Then go to project folder:

cd react-demo

Add Bootstrap Library

Now that we have our React component and some basic styling, let's add a few more things to it. We need to import Bootstrap's CSS and JavaScript files so they can be used by your page.

Install & Import Bootstrap

npm install bootstrap

You'll also need to include the Bootstrap router in order for your app to work properly:

import {bootstrap} from "react-bootstrap"

Create our own custom Select component

Create a new file in ./src/components directory called Select.js. This will allow you to create a React Select Dropdown separately.

import React from 'react'
function Select() {
  return (
    <div></div>
  )
}
export default Select

We are using the useState hook to set the selected option. We are using the onChange hook to get the selected value of the option by setting undefined as the starting state.

You can set a certain value within the options property, and when onChange is invoked, any value can be selected.

Update 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="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
      </select>
      {selectValue && <h2 className="mt-3">{selectValue}</h2>}
    </div>
  );
};
export default Select;

Open App.js and Changes To The Code

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;

Testing

Now you can start the development server. This command runs the development server:

npm start

you will see URLs in the terminal that you can use to view the app.