<html> <head> <meta charset="UTF-8" /> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useState } = React; function App() { const [selectedValue, setSelectedValue] = useState(""); const handleDropdownChange = (event) => { const value = event.target.value; setSelectedValue(value); }; console.log(selectedValue); return ( <div className="container"> <h3 className="title"> React Js Get DropDown Selected Value with OnChange Event </h3> <select className="dropdown" onChange={handleDropdownChange}> <option className="option" value="New York"> New York </option> <option className="option" value="London"> London </option> <option className="option" value="Tokyo"> Tokyo </option> <option className="option" value="Paris"> Paris </option> <option className="option" value="Sydney"> Sydney </option> <option className="option" value="Dubai"> Dubai </option> </select> <p className="selected-value">Selected Value: {selectedValue}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> .container { max-width: 500px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .title { font-size: 24px; margin-bottom: 20px; } .dropdown { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; outline: none; } .option { padding: 5px; } .selected-value { margin-top: 20px; font-size: 18px; } </style> </body></html>