Autocomplete react

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

      />
    )}
  />

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" />
    )}
  />

Autocomplete react

<Autocomplete
  disablePortal
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

Source: mui.com

Similar codes

0 vote132 views1 answer
Map of filtered data react
Javascript React
0 vote148 views1 answer
React native style variable
Javascript React
0 vote129 views1 answer
Enzynme not support react 17
Javascript React
0 vote135 views1 answer
React native get source maps
Javascript React
125 votes260 views6 answers
Create React App command
Javascript React
1 vote131 views2 answers
How to render react native app under the status bar
Javascript React
13 votes145 views10 answers
React navigation
Javascript React
17 votes129 views5 answers
Add background image react native
Javascript React
0 vote148 views2 answers
React convert excel to json
Javascript React
0 vote120 views1 answer
Placeholder text disappear when click in react
Javascript React