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 vote117 views1 answer
Detect the city on application launch via geolocation react native
Javascript React
1 vote116 views4 answers
React native push notifications npm
Javascript React
2 votes121 views1 answer
React-native open call app
Javascript React
11 votes108 views3 answers
Reactjs get url query params as object
Javascript React
3 votes115 views3 answers
Update create react app
Javascript React
2 votes134 views1 answer
Scoll to top on each route react
Javascript React
24 votes131 views3 answers
Set port in react app
Javascript React
13 votes116 views3 answers
Enable emmet vscode react
Javascript React
0 vote122 views1 answer
React chrome get language
Javascript React
2 votes126 views1 answer
React dynamic import
Javascript React