Getting the value in the React material-UI Autocomplete

Dawn17

I am referring to the documentation of React Material-UI (https://material-ui.com/components/autocomplete/).

In the demo code,

    <Autocomplete
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

I get how it works, but I am not sure how I am supposed to get the selected value.

For example, I want to use the onChange prop to this so that I can make some actions based on the selection.

I tried adding onChange={v => console.log(v)}

but the v does not show anything related to the selected value.

Dawn17

Solved by using passing in the (event, value) to the onChange props.

<Autocomplete
    onChange={(event, value) => console.log(value)} // prints the selected value
    renderInput={params => (
        <TextField {...params} label="Label" variant="outlined" fullWidth />
    )}
/>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Getting selected value in Material-UI Autocomplete

From Dev

Material UI react autocomplete set different label and different value

From Java

Problem with Autocomplete (Material UI + React + Reagent/ClojureScript)

From Dev

react material ui autocomplete element focus onclick

From Dev

Getting start with React and Material Ui

From Dev

Material UI AutoComplete not rendering on remote dataSource in React application

From Dev

jQuery Ui autocomplete Not Getting Value From Php MySQL File

From Dev

React js material ui initial value equal to ""

From Java

Handle change on Autocomplete Component from material ui

From Dev

Problem to use Component Lab > Autocomplete of Material UI

From Dev

Material-UI Tabs inside AutoComplete popover

From Java

How to set default value in material-UI select box in react?

From Dev

How to get password field value in react's material-ui

From Dev

React Material-UI slider value keeps resetting to zero

From Dev

Getting started with material-ui

From Dev

Getting filtered results by JQuery UI autocomplete

From Dev

React material UI reset values

From Dev

Steps to start with Material UI in React

From Dev

React + Material UI, require is not defined

From Dev

React Material UI - Responsive CardMedia

From Dev

React Material UI Multiple Collapse

From Dev

jQuery UI Autocomplete displaying wrong value

From Dev

jQuery UI Autocomplete displaying wrong value

From Java

Display number of matching search options on Textfield input in Material UI Autocomplete

From Java

Material-ui Autocomplete - OnChange is blocking other features to work

From Dev

Load Material UI AutoComplete suggestions after user input

From Dev

InitialValues are not displayed in AutoComplete from Material UI component in Formik Field

From Dev

How to store autocomplete selected option material-ui

From Dev

Load Material UI AutoComplete suggestions after user input

Related Related

  1. 1

    Getting selected value in Material-UI Autocomplete

  2. 2

    Material UI react autocomplete set different label and different value

  3. 3

    Problem with Autocomplete (Material UI + React + Reagent/ClojureScript)

  4. 4

    react material ui autocomplete element focus onclick

  5. 5

    Getting start with React and Material Ui

  6. 6

    Material UI AutoComplete not rendering on remote dataSource in React application

  7. 7

    jQuery Ui autocomplete Not Getting Value From Php MySQL File

  8. 8

    React js material ui initial value equal to ""

  9. 9

    Handle change on Autocomplete Component from material ui

  10. 10

    Problem to use Component Lab > Autocomplete of Material UI

  11. 11

    Material-UI Tabs inside AutoComplete popover

  12. 12

    How to set default value in material-UI select box in react?

  13. 13

    How to get password field value in react's material-ui

  14. 14

    React Material-UI slider value keeps resetting to zero

  15. 15

    Getting started with material-ui

  16. 16

    Getting filtered results by JQuery UI autocomplete

  17. 17

    React material UI reset values

  18. 18

    Steps to start with Material UI in React

  19. 19

    React + Material UI, require is not defined

  20. 20

    React Material UI - Responsive CardMedia

  21. 21

    React Material UI Multiple Collapse

  22. 22

    jQuery UI Autocomplete displaying wrong value

  23. 23

    jQuery UI Autocomplete displaying wrong value

  24. 24

    Display number of matching search options on Textfield input in Material UI Autocomplete

  25. 25

    Material-ui Autocomplete - OnChange is blocking other features to work

  26. 26

    Load Material UI AutoComplete suggestions after user input

  27. 27

    InitialValues are not displayed in AutoComplete from Material UI component in Formik Field

  28. 28

    How to store autocomplete selected option material-ui

  29. 29

    Load Material UI AutoComplete suggestions after user input

HotTag

Archive