React - event handler firing twice

JavaScript
1

I have a component that is just returning a couple of select/dropdown components. I put a console.log in the callback and it is being called twice - once with the expected event.target.value and then once again with a value of undefined.

The component looks like this:

function ThemePicker(props: Props) {
  return (
    <div className="sticky-theme-picker">
      <IonItem>
        <IonLabel>Choose a component</IonLabel>
        <IonSelect
          value={props.component}
          onIonChange={event => props.handleComponentPick(event)}
          interface="popover"
          placeholder="Select One"
        >
          <IonSelectOption value="button">Button</IonSelectOption>
          <IonSelectOption value="card">Card</IonSelectOption>
          <IonSelectOption value="radio">Radio</IonSelectOption>
          <IonSelectOption value="slides">Slider</IonSelectOption>
          <IonSelectOption value="icons">Icons</IonSelectOption>
        </IonSelect>
      </IonItem>

      <IonItem>
        <IonLabel>Choose a brand</IonLabel>
        <IonSelect
          value={props.brand}
          onIonChange={event => props.handleBrandChange(event)}
          interface="popover"
          placeholder="Select One"
        >
          <IonSelectOption value="lrs">LRS</IonSelectOption>
          <IonSelectOption value="ribena">Ribena</IonSelectOption>
          <IonSelectOption value="lucozade">Lucozade</IonSelectOption>
        </IonSelect>
      </IonItem>
    </div>
  );
}

The event handlers are:

  handleComponentPick = (event: any) => {
    console.log(event.target.value);
    const component = event.target.value;
    this.props.history.push(`/${this.props.match.params.brand}/${component}`);
  };

  handleBrandChange = (event: any) => {
    if (event.target instanceof HTMLElement) {
      const brand = event.target.value;
      this.props.history.push(`/${brand}/${this.props.match.params.component}`);
    }
  };

I’m not sure if it is relevant to the problem, but I am using React Router to render the select/dropdown component:

  <Route
            path="/"
            render={props => (
              <ThemePicker
                component={this.props.match.params.component}
                brand={this.props.match.params.brand}
                handleBrandChange={this.handleBrandChange}
                handleComponentPick={this.handleComponentPick}
                {...props}
              />
            )}
          />
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.