HTML <select> tag in react is a common web development component used for dynamic form input or as a select menu. It provides multiple selection options in the form of a dropdown menu. It enables the web page to render a select box with the options. The <select> tag is used as an outer element and the <option> element is nested within the <select> tag for defining options in a list.
Approach for using <select> tag
To achieve this functionality, we will use the “App.js” file and component which will be available by default in the project structure. In our “App.js” component, we will write the main logic. We will use HTML <select> tag and <option> tag. A constant array will be created which will have all the options. Under <select> tag we will iterate the “options” array to display drop-down options. On the <select> tag, we will use the “onChange” property which will hold a reference to the “onOptionChangeHandler” function. This function will get triggered whenever we change the value of the dropdown.
Steps to create the application
Step 1: Create a React.js application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move into that directory using the following command:
cd foldername
Project Structure
Example: In this example we will create a dropdown selection input with some options present in the given options array.
Javascript
// App.jsimport React, { useState } from "react";import "./App.css";const App = () => { const [data, setData] = useState(undefined); const options = [ "HTML", "CSS", "JavaScript", "React", "Redux", ]; const onOptionChangeHandler = (event) => { setData(event.target.value); console.log( "User Selected Value - ", event.target.value ); }; return ( <center> <h1 className="neveropen"> neveropen</h1> <h3>HTML select tag in React js</h3> <select onChange={onOptionChangeHandler}> <option>Please choose one option</option> {options.map((option, index) => { return ( <option key={index}> {option} </option> ); })} </select> <h3>You selected: {data} </h3> </center> );};export default App; |
CSS
/* App.css */.App { text-align: center;}.neveropen { color: green;} |
Step to Run Application: To run the application, execute the below command from the root directory of the project:
npm start
Output: Your web application will be live on “http://localhost:3000”. Now click on the dropdown to select any value.
