Autocomplete With Multiple Input Fields in materal ui code example
Example 1: 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 2: 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
/>
)}
/>