Search code examples
reactjstypescriptcomponents

React Autocomplete component; how to not pass the event in the onChange method?


I have added an Autocomplete component to my React page. It looks like this:

class Koppel extends Component<PropsType, State> {
  constructor(props: PropsType) {
    super(props);

    this.state = {
      geviUnCombis: new Array<GeviUnCombi>()
    };
  }

  public render() {
    const { classes } = this.props;

    return (
      <div className={classes.autoSuggest}>
        <Autocomplete
          ListboxProps={{ style: { maxHeight: 200, overflow: 'auto' } }}
          disablePortal
          autoHighlight={true}
          options={this.props.geviUnCombis}
          onChange={(event, value) => this.onSelect(event, value)}
          getOptionLabel={(geviUnCombi) => (geviUnCombi.geviCode ? geviUnCombi.geviCode : "") + "/" + geviUnCombi.unCode}
          renderInput={(input) => <TextField {...input} label="Type"/>}
        />
      </div>
    );
  }

  private onSelect(event, value) {
    this.props.functies.create(value);
  }
}

This code does what it's supposed to, except for 1 small problem. OnChange passes both a SyntheticEvent<Element, Event> and a GeviUnCombi (the option, what I need).

However, I can't figure out how to only pass the value, not the event. I feel like it should be easy, and have searched on how to do it both in the React documentation and on SO, but all example code implements the Autocomplete totally different from what I have. I feel like there's a specific word / term for the issue which I sadly don't know.

I tried doing onChange={(value) => this.onSelect(value)}, but this resulted in only the SyntheticEvent being given. If someone could help me I'd be eternally grateful!


Solution

  • As explained by Nicholas Tower in the comments, using an underscore solved the problem. Working code:

    onChange={(_event, value) => this.onSelect(value)}