React Downshift autocomplete requests in an infinite loop - reactjs

Question

I have the following React component
class Search extends Component {
constructor(props){
super(props);
this.state = {
suggestions: []
};
this.getSuggestions = this.getSuggestions.bind(this);
}
renderSuggestion(){
return (
this.state.suggestions.map((suggestion, index) =>
<MenuItem component="div" key={index} value={index} >
{suggestion}
</MenuItem>
)
);
};
getSuggestions (value) {
const inputValue = deburr(value.trim()).toLowerCase();
if(inputValue.length >= 3){
axios.get('http://localhost:5001/api/v1/products',{
params: {
q: inputValue
}
}).then(response => {
this.setState({suggestions : response.data.data });
});
}
};
render() {
const { classes } = this.props;
return (
<div className={classes.container}>
<Downshift id="downshift-simple">
{({
getInputProps,
getItemProps,
getMenuProps,
highlightedIndex,
inputValue,
isOpen,
}) => (
<div>
<TextField placeholder="Search a country (start with a)"
fullWidth={true}
onChange={this.getSuggestions(inputValue)}
{...getInputProps()}
/>
<div {...getMenuProps()}>
{isOpen ? (
<Paper className={classes.paper} square>
{this.renderSuggestion}
</Paper>
) : null}
</div>
</div>
)}
</Downshift>
</div>
);
}
}
export default withStyles(styles)(Search);
The autocomletion wors as expected as long as i do not perform an axios request in getSuggestions(). It seems to perform the request in an infinite loop as long as i do not refresh the page. Any ideas why this strange behaviour occures?

Answer 1

Because you are calling that function instead of passing the function to onChange. Kindly change your function to arrow function. refer this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
getSuggestions (e) {
let value = e.target.value
const inputValue = deburr(value.trim()).toLowerCase();
if(inputValue.length >= 3){
axios.get('http://localhost:5001/api/v1/products',{
params: {
q: inputValue
}
}).then(response => {
this.setState({suggestions : response.data.data });
});
}
};
<TextField placeholder="Search a country (start with a)"
fullWidth={true}
onChange={(e)=> this.getSuggestions(e)}
{...getInputProps()}
/>