Auto select option from Dropdown in ReactJS
Auto Select option from Dropdown means without forcing the user to click on any options, the option value is auto-populated. Material UI for React has this component available for us and it is very easy to integrate. We can auto-select the options from Dropdown using the following approach.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the material-ui modules using the following command:
npm install @material-ui/core npm install @material-ui/lab
Project Structure: It will look like the following.
App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Javascript
import React from 'react' import TextField from '@material-ui/core/TextField' ; import Autocomplete from '@material-ui/lab/Autocomplete' ; const App = () => { // Sample options for dropdown const myOptions = [ 'One' , 'Two' , 'Three' , 'Four' , 'Five' ]; return ( <div style={{ marginLeft: '40%' , marginTop: '60px' }}> <h3>Greetings from w3wiki!</h3> <Autocomplete style={{width:500}} autoSelect options={myOptions} renderInput={(params) => ( <TextField {...params} variant= "outlined" label= "AutoSelect Dropdown" /> )} /> </div> ); } export default App |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Now over any option and click outside the dropdown, the option value will be auto-populated. This is how auto select works in ReactJS for dropdown.