autocomplete in material ui code example
Example 1: how to get value from autocomplete material ui
<Autocomplete
onChange={(event, value) => console.log(value)} // prints the selected value
.....
renderInput={params => (
<TextField {...params} label="Label" variant="outlined" fullWidth />
)}
/>
Example 2: material ui autocomple how make first option is selected as default
<Autocomplete
id="id"
options={Options}
getOptionLabel={option => option.label}
defaultValue={Options.find(v => v.label[0])}
renderInput={params => (
<TextField {...params} label="label" variant="outlined" />
)}
/>
Example 3: how to set dynamic autocomplete with material ui
import React, { useState } from 'react';
using useState:
const [val,setVal]=useState({})
changin value on click of button
const handleClick = () => {
setVal(top100Films[0]);//you pass any value from the array of top100Films
// set value in TextField from dropdown list
};
and pass this value to component in render
<Autocomplete
value={val}
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField
{...params}
label="Combo box"
variant="outlined"
fullWidth
/>
)}
/>