How to remove selected value when click button of Autocomplete Material UI?

Question

I'm using autocomplete of material-ui, and trying to delete selected value whenever click a button but can not find any way to do that. Any idea?

            <Autocomplete
              className={classes.techListBox}
              disableCloseOnSelect={true}
              multiple
              options={this.props.displayProject.techList}
              getOptionLabel={options => options.title}
              defaultValue={this.props.displayProject.techName}
              onChange={(e, techs) => {
                this.formatTechID(techs);
              }}
              renderInput={params => (
                <TextField
                  {...params}
                  variant="outlined"
                  placeholder={t("tech")}
                  margin="normal"
                  fullWidth
                />
              )}
            ></Autocomplete>```

Answer 1

You will need to set the value(a state) and the onChange event at Autocomplete:) when you click the rest button it will just reset the state :)

   const [value, setValue] = React.useState(null);
   <Autocomplete 
    value={value}
    onChange={(event, newValue) => {
      setValue(newValue);
    }}
   >

   <button onClick={() => setValue(null)}>Reset autocomplete</button>

I made a working demo for you: https://codesandbox.io/s/material-demo-zqz4v

Comment down for more questions :)