Site icon RemoteStack

How to Handle Select onChange Event in React

Select element gathers user input from a series of options through a dropdown list component. Do you know how the Select element is created in React?

In this tutorial, we will show you how to create a select dropdown in React. How to bind onChange event to Select dropdown, get and display the Select dropdown value via React component.

The onChange event invokes when the value of an element changes. We will create a simple movie list with select element and add an onChange event with a custom function. The custom function will retrieve the user-selected value and set it to React state.

Let’s checkout how to do it.

Create React Project

You have to install a new React app, in case if you haven’t done so. Go to terminal, type the command, then run the command by pressing enter.

npx create-react-app my-react-app
cd my-react-app

Install Bootstrap Module

We are not writing the CSS from scratch to style the select element. Hence, install the bootstrap library with given command.

npm i bootstrap

Create Component File

We are creating a new component; Thus, you have to make a new file and folder in src/ directory, features/Home.js.

import React from 'react'

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

export default Select

Retrieve Value from Select

We need a useState hook, a select option with some data, and change the select state when the user selects any option from the list options.

Add the code to the features/Home.js file.

import React from "react";

const Select = () => {
  const [selected, setSelected] = React.useState();

  const selectDropdown = (e) => {
    const val = e.target.value;
    setSelected(val);
  };

  return (
    <div>
      <h2 className="mb-3">React Select Dropdown onChange Event Example</h2>
      <select onChange={selectDropdown} className="form-select">
        <option selected disabled>
          Select movie name
        </option>
        <option value="Inception">Inception</option>
        <option value="American Beauty">American Beauty</option>
        <option value="Avatar">Avatar</option>
        <option value="The Exorcist">The Exorcist</option>
      </select>
      {selected && <h2 className="mt-4">{selected}</h2>}
    </div>
  );
};

export default Select;

Update Global Component

Next, we have to register the Home component, thus we will import it inside the App.js file.

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

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

export default App;

Start Application

You now need to run the React application, hence execute the given command to start the app.

Make sure to check the app with suggested url, only if you are developing locally.

npm start
http://localhost:3000

Conclusion

In this tutorial, we have learned how to use the onChange event with Select, how to pass an event to onChange through a custom function, how to use bootstrap to design a select element.

Not only but also, we have also ascertained how to get the value of select on value change.

Exit mobile version