Auto select option from Dropdown in ReactJS
Last Updated :
18 Jan, 2021
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.
Project Structure
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 = () => {
const myOptions = [ 'One' , 'Two' , 'Three' , 'Four' , 'Five' ];
return (
<div style={{ marginLeft: '40%' , marginTop: '60px' }}>
<h3>Greetings from GeeksforGeeks!</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.
Share your thoughts in the comments
Please Login to comment...