CODEWITHSUNDEEP
reactjsautocompletematerial-ui
Jay J
Jay J

Reputation: 430

Need help capturing the user choice from Autocomplete (multiple) in state (React)

Thanks for reading. I'm using Material-UI Autocomplete and trying to figure out how to capture a user choice. Here's the code. For now, I'm trying to console.log the user choice or deletion of a movie from the selection list. If I can get this to work I'll probably use a state settor in handleChange to capture the movie and read the state value for processing once the dialog is submitted. Since this is a multiple Autocomplete there may be several selected values.

Currently event.target.value in handleChange displays a zero when selecting a movie from the list, and undefined when removing. I need it to display the actual title.

Happy to consider any suggestion to get to the objective of being able to process all autocomplete selections upon dialog submission. Thanks in advance!

React version: 16.8

Upvotes: 1

Views: 224

Answers (1)

Jay J
Jay J

Reputation: 430

Resolved by sending the parameters (event, value) from onChange. Please see the onChange value in the below snippet.

export default function App() {
  const classes = useStyles();

  const handleChange = (value) =>
  {
    const x = value.map(function(a){return {title:a.title};});
    console.log(x);
  };

  return (
    <div className={classes.root}>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={top100Films}
        onChange={(event, value) => handleChange(value)}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[14]]}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="filterSelectedOptions"
            placeholder="Favorites"
          />
        )}
      />
    </div>
  );
}

Upvotes: 1

Related Questions