How to get selected value of mui autocomplete in react js?
January 19, 2023Hi Friends 👋,
Welcome To aGuideHub!
To get selected value of mui autocomplete in React js, you will use open={open}. It will get selected value of mui autocomplete in react js.
Today, I am going to show you, how to get selected value of mui autocomplete in react js.
Installation
Install the following packages to use get selected value of mui autocomplete in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material get selected value of mui autocomplete example.
The code below is an example of a Material UI autocomplete that is always open. You have to import @mui material autocomplete and you have to use this code open={open} from this we get selected value of mui to autocomplete in React js.
App.js
import Autocomplete from '@mui/material/Autocomplete'
import TextField from '@mui/material/TextField';
import { useState } from 'react';
export default function App () {
const [value, setValue] = useState('');
const [open, setOpen] = useState(false);
const handleOptionSelect = (event, newValue) => {
setValue(newValue);
setOpen(false);
};
return (
<div>
<Autocomplete
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
sx={{width: `300px`}}
value={value}
onChange={handleOptionSelect}
options={['Option 1', 'Option 2', 'Option 3']}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
<p>Selected Value</p>
<p>{value}</p>
</div>
);
}In the above code example, I have used the @mui/material component and get selected value of mui autocomplete in react js.
Check the output of the above code example.
All the best 👍
