DropDown OnChange Event Using ReactJS Last Updated : 24 Sep, 2024 Comments Improve Suggest changes Like Article Like Report The DropDown OnChange event in ReactJS is an important functionality that allows developers to respond to changes made to a dropdown menu. This event is triggered when the user selects a new option from the dropdown list. In this article, we will learn how to use onChange event in DropDown menu.PrerequisitesJavaScriptReactSteps to Create DropDown OnChange EventStep 1: You will start a new project using create-react-app commandnpx create-react-app dropdown-menuStep 2: Now go to your dropdown-menu folder Install the dependencies required in this project by typing the given command in the terminal.cd dropdown-menunpm installNow create the components folder in src then go to the components folder and create two files Dropdown.jsx and style.css.Folder StructureFolder StructureDependencies"dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4"}Example: CSS /* style.css */ .container { padding: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .dropdown { padding: 20px; cursor: pointer; } .answer { font-weight: 500; font-size: 35px; margin-left: 10px; } JavaScript // Dropdown.jsx import "./style.css"; import React, { useState } from "react" const Dropdown = () => { const [selectedValue, setSelectedValue] = useState(""); const handleChange = (event) => { setSelectedValue(event.target.value); } console.log("value >>", selectedValue); return ( <div className="container"> <h3>select an Option from DropDown Menu</h3> <select value={selectedValue} onChange={handleChange} className='dropdown'> <option value="">--Choose an option--</option> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> {/* Displaying the selected value */} <p>Selected Value: <span className=" answer"> {selectedValue.length === 0 ? "No option selected" : selectedValue} </span></p> </div> ) } export default Dropdown; JavaScript // App.js import React from "react" import Dropdown from "./components/Dropdown" const App = () => { return ( <div> <Dropdown></Dropdown> </div> ) } export default App Step to Run Application: Run the application using the following command from the root directory of the project:npm startOutput: Comment More infoAdvertise with us Next Article DropDown OnChange Event Using ReactJS G guptaanvay1940 Follow Improve Article Tags : Web Technologies ReactJS Similar Reads React onChange Event React onChange is an event handler that triggers when there is any change in the input field. This event captures the changes in an Input Field and executes the handler function. It is fired when the input field is modified and loses focus. It is one of the form events that updates when the input fi 2 min read React Suite Dropdown Placement A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite dropdown placeme 4 min read ReactJS Onsen UI Select Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Select Component allows the user to select an item from a list of options. We can use the following approach in ReactJS to 2 min read React Suite Dropdown ts: Placement Props React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. There are different ways for user to posit 3 min read ReactJS Onsen UI Switch Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Switch components are used to toggle the state of a single setting on or off. We can use the following approach in ReactJS 2 min read React Suite Dropdown Menu items React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The dropdown component allows the user to provide navigation that uses a select picker if you want to select a value. Dropdown Menu is used to create a menu wit 3 min read Appointment Management System using React The Appointment Management System is a web application that allows users to schedule, manage, and view appointments. It provides an easy-to-use interface for clients to book and keep track of appointments. Below is a simplified outline for creating an Appointment Management System using React JS. Pr 5 min read ReactJS Semantic UI Dropdown Module Semantic UI is a modern framework used in developing seamless designs for the website, Its gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we see know how to use Dropdown Module in ReactJ 3 min read React Suite <Dropdown> Props React Suite is a front-end library designed for the middle platform and back-end products. The React Suite Dropdown provides navigation that uses a select picker in order to select a value. React Suite <Dropdown> Props List: activeKey: It takes a string value, corresponding to eventKey in the 4 min read What is onChangeCapture Event in ReactJS ? ReactJS, a popular JavaScript library for building user interfaces, provides a wide range of events that developers can utilize to create interactive and dynamic applications. One such event is the onChangeCapture event, which is specifically designed for handling changes to form inputs and capturin 2 min read Like