title: Reactjs - Update options by hitting API on every input change in Autocomplete component (Material UI)
body: <p>I am a beginner in Reactjs. I want to create an Autocomplete component where on every input change the API is hit and the options are updated accordingly. I am using the Autocomplete component provided by Material UI. As I understand, the example given <a href="https://material-ui.com/components/autocomplete/#Asynchronous.js" rel="noreferrer">here</a> hits an API once and filters it locally. I tried using the InputChange props provided by material component. Also I found this anser - <a href="https://stackoverflow.com/a/59751227/8090336">https://stackoverflow.com/a/59751227/8090336</a>. But can't figure out the right way.</p>
  
  <pre><code>import Autocomplete from "@material-ui/lab/Autocomplete";
  import TextField from "@material-ui/core/TextField";
  import {CircularProgress} from "@material-ui/core";
  import debounce from 'lodash/debounce';
  
  const SelectField = ({inputLabel}) =&gt; {
      const [ open, setOpen ] = React.useState(false);
      const [ options, setOptions ] = React.useState([]);
      const [ inputValue, setInputValue ] = React.useState("");
      const loading = open &amp;&amp; options.length === 0;
  
      const onInputChange = debounce((event, value) =&gt; {
          console.log("OnInputChange",value);
          setInputValue(value);
          (async() =&gt; {
              const response = await fetch('https://api.tvmaze.com/search/shows?q='+inputValue);
              console.log("API hit again")
              let movies = await response.json();
  
              if(movies !== undefined) {
                  setOptions(movies);
                  console.log(movies)
              }
          })();
      }, 1500);
  
      return (
          &lt;Autocomplete
              style={{ width:300 }}
              open={open}
              onOpen={() =&gt; {
                setOpen(true);
              }}
              onClose={() =&gt; {
                setOpen(false);
              }}
              getOptionLabel={(option) =&gt; option.show.name}
              onInputChange={onInputChange}
              options={options}
              loading={loading}
              renderInput={(params) =&gt; (&lt;TextField
                  {...params}
                  label={inputLabel}
                  variant="outlined"
                  InputProps={{
                    ...params.InputProps,
                    endAdornment: (
                        &lt;React.Fragment&gt;
                            {loading ? &lt;CircularProgress color="inherit" size={20} /&gt;: null }
                            {params.InputProps.endAdornment}
                        &lt;/React.Fragment&gt;
                    ),
                  }}
                /&gt;
              )}
          /&gt;
      );
  }
  
  export default SelectField;
  </code></pre>