flowtype error with react's synthetic event

Question

I am actually trying to learn flowtype. In my react app I have a reusable TextArea component, this is the props declaration:

type props = {
  fill?: boolean,
  large?: boolean,
  blue?: boolean,
  red?: boolean,
  onChange: (
    e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
  ) => void,
  value: string
};

when I reuse it in an other component:

<TextArea value={this.state.note} onChange={this.changeNote} />

the changeNote method:

  changeNote = (
    e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
  ) => {
    this.setState({ note: e.currentTarget.value });
  };

I get this error when running flow:

app/components/pages/bills/BillAddPage.js:256
256:           <TextArea value={this.state.note} onChange={this.changeNote} />
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `TextArea`
 21:     e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ intersection type. Expected polymorphic type instead of. See: app/components/atoms/TextArea.js:21
141:     e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ class type: SyntheticEvent

What's wrong about that?

Answer 1

You should use a specific SyntheticEvent instead, like SyntheticInputEvent . 🙂

• SyntheticEvent<T> for Event
• SyntheticAnimationEvent<T> for AnimationEvent
• SyntheticCompositionEvent<T> for CompositionEvent
• SyntheticInputEvent<T> for InputEvent
• SyntheticUIEvent<T> for UIEvent
• SyntheticFocusEvent<T> for FocusEvent
• SyntheticKeyboardEvent<T> for KeyboardEvent
• SyntheticMouseEvent<T> for MouseEvent
• SyntheticDragEvent<T> for DragEvent
• SyntheticWheelEvent<T> for WheelEvent
• SyntheticTouchEvent<T> for TouchEvent
• SyntheticTransitionEvent<T> for TransitionEvent

Ref: https://flow.org/en/docs/react/events