/TypeScript/How to get value from autocomplete material ui

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

Source: stackoverflow.com

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

Similar codes

0 vote268 views1 answer
Comments html.erb
TypeScript
0 vote255 views1 answer
Check if all array elements match closure swift
TypeScript
0 vote261 views1 answer
InsertSheet() at the beginning of active sheets google script
TypeScript
1 vote243 views1 answer
How to delete the spec.ts file in project all togethre
TypeScript
1 vote270 views1 answer
Execute only one test spec with angular-cli (ng test)
TypeScript
0 vote257 views1 answer
Empty string in typescript
TypeScript
0 vote254 views1 answer
Whats is the use Notes.create(note) .then((data) => { res.send(data); }) .catch((err) => { res.status(500).send({ message: err.message || 'Some error occurred while create the Notes', }); });
TypeScript
3 votes280 views1 answer
Ts reverse array
TypeScript
0 vote249 views1 answer
CSS is being used to hide three items on the index.html page (two <li> elements and a <div> element). Use jQuery's :hidden pseudo selector and the show() method to display the hidden <li> elements, while leaving the <div> elem
TypeScript
1 vote254 views1 answer
Ts object field from variable
TypeScript