Getting the value in the React Material UI Autocomplete

Question

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.

Thanks for asking. Can't believe that the project still hasn't clearly documented this! — Jay J
– Jay J, Commented Jan 7, 2021 at 20:48

Dawn17 · Accepted Answer · 2019-11-01 21:59:43Z

189

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

answered Nov 1, 2019 at 21:59

Dawn17

8,30718 gold badges68 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Luis Febro Over a year ago

I spent hours on end trying to get this value right, this solved beautifully.

maaartinus Over a year ago

Nice! Minor addendum someone might fight useful: In case of the user typing in an arbitrary value (like freeSolo), there's no onChange event. However, there's onInputChange and I'm tracking the value in the component state, so I can use it when the user clicks on an "add" button. I'm using both events.

Ak01 Over a year ago

how do i get the index of the item selected? meaning if i select the first one, i want 0 and so on

Steve Angello Over a year ago

How i get multiples autocomplete values?

ShwetaJ Over a year ago

Hey @SteveAngello - have you found a way to get multiple autocomplete values?

|

bcbl001 · Accepted Answer · 2021-07-20 20:40:47Z

8

The onChange prop works for multiple autocomplete values as well (@Steve Angello @ShwetaJ). The value returned is a list of all the selected options.

const [selectedOptions, setSelectedOptions] = useState([]);

const handleChange = (event, value) => setSelectedOptions(value);

const handleSubmit = () => console.log(selectedOptions);

.
.
.

<Autocomplete
  multiple
  autoHighlight
  id="tags-outlined"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  onChange={handleChange}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
    />
  )}
/>

.
.
.


<button onClick={handleSubmit}>Submit!</button>

answered Jul 20, 2021 at 20:40

bcbl001

811 silver badge2 bronze badges

Comments

Nicofisi · Accepted Answer · 2022-02-06 03:41:24Z

3

You can use useState to store the recevied value and onChange to get the value:

const [selected, setSelected] = useState([]);


return (
    <Autocomplete
        onChange={(event, value) => setSelected(value)}
        renderInput={(params) => <TextField {...params} label="selected" />}
    />
);

edited Feb 6, 2022 at 3:41

Nicofisi

1,1131 gold badge15 silver badges27 bronze badges

answered Feb 1, 2022 at 10:13

hem charan

1252 silver badges9 bronze badges

Comments

Supun Sandaruwan · Accepted Answer · 2021-10-05 14:25:15Z

Here is TS working example

  const tags = ["perimeter", "Algebra", "equation", "square root"];

  const handleInput = (e: React.SyntheticEvent, value: string[]) => {
    console.log(value);
  };

<Autocomplete
    multiple
    options={tags}
    onChange={handleInput}
    renderTags={(value: readonly string[], getTagProps) =>
    value.map((option: string, index: number) => (
            <Chip
                variant="outlined"
                label={option}
                {...getTagProps({ index })}
             />
            ))
           }
           renderInput={(params) => (
            <TextField
               {...params}
               variant="filled"
               label="Tags"
               placeholder="select question tags"
           />
        )}
   />

============ Output ===============

Collectives™ on Stack Overflow

Getting the value in the React Material UI Autocomplete

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related