Handle change on Autocomplete Component from material ui

Question

I want to use Autocomplete component for input tags. I'm trying to get the tags and save them on a state so I can later save them on the database. I'm using functions instead of classes in react. I did try with onChange, but I didn't get any result.

<div style={{ width: 500 }}>   <Autocomplete     multiple     options={autoComplete}     filterSelectedOptions     getOptionLabel={(option) => option.tags}     renderInput={(params) => (       <TextField         className={classes.input}         {...params}         variant="outlined"         placeholder="Favorites"         margin="normal"         fullWidth       />     )}   /> </div>; 

Answer 1

As Yuki already mentioned, make sure you did use the onChange function properly. It receives two parameters. According to the documentation:

Signature: function(event: object, value: any) => void.

event: The event source of the callback

value: null (The value/values within the Autocomplete component).

Here's an example:

import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField';  export default class Tags extends React.Component {   constructor(props) {     super(props);     this.state = {       tags: []     };     this.onTagsChange = this.onTagsChange.bind(this);   }    onTagsChange = (event, values) => {     this.setState({       tags: values     }, () => {       // This will output an array of objects       // given by Autocompelte options property.       console.log(this.state.tags);     });   }    render() {     return (       <div style={{ width: 500 }}>         <Autocomplete           multiple           options={top100Films}           getOptionLabel={option => option.title}           defaultValue={[top100Films[13]]}           onChange={this.onTagsChange}           renderInput={params => (             <TextField               {...params}               variant="standard"               label="Multiple values"               placeholder="Favorites"               margin="normal"               fullWidth             />           )}         />       </div>     );   } }  const top100Films = [   { title: 'The Shawshank Redemption', year: 1994 },   { title: 'The Godfather', year: 1972 },   { title: 'The Godfather: Part II', year: 1974 },   { title: 'The Dark Knight', year: 2008 },   { title: '12 Angry Men', year: 1957 },   { title: "Schindler's List", year: 1993 },   { title: 'Pulp Fiction', year: 1994 },   { title: 'The Lord of the Rings: The Return of the King', year: 2003 },   { title: 'The Good, the Bad and the Ugly', year: 1966 },   { title: 'Fight Club', year: 1999 },   { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },   { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },   { title: 'Forrest Gump', year: 1994 },   { title: 'Inception', year: 2010 }, ]; 

Answer 2

I needed to hit my api on every input change to get my tags from backend!

Use Material-ui onInputChange if you want to get your suggested tags on every input change!

this.state = {   // labels are temp, will change every time on auto complete   labels: [],   // these are the ones which will be send with content   selectedTags: [], } }  //to get the value on every input change onInputChange(event,value){ console.log(value) //response from api .then((res) => {       this.setState({         labels: res       })     })  }  //to select input tags onSelectTag(e, value) { this.setState({   selectedTags: value }) }               <Autocomplete             multiple             options={top100Films}             getOptionLabel={option => option.title}             onChange={this.onSelectTag} // click on the show tags             onInputChange={this.onInputChange} //** on every input change hitting my api**             filterSelectedOptions             renderInput={(params) => (               <TextField                 {...params}                 variant="standard"                 label="Multiple values"                 placeholder="Favorites"                 margin="normal"                 fullWidth               />