Handling types when combining React HTML DOM events in a function call

Question

Question: Is there a way to combine the types of different HTML DOM events in Typescript?

(I know I can avoid this error by splitting my function in two different functions but I want to avoid that)

My component looks similar to this:

const TestComponent: React.FC = () => {
const handleFileChange = (e: React.DragEvent | React.SyntheticEvent) => {
  const fileData = e.dataTransfer || e.target;
});

return (
  <div>
    <div onDrop={handleFileChange} />
    <input type="file" onChange={handleFileChange} />
  </div>
)};

The error I'm getting is on the e.dataTransfer inside the handleFileChange function:

Property 'dataTransfer' does not exist on type 'SyntheticEvent<Element, Event> | DragEvent<Element>'.
Property 'dataTransfer' does not exist on type 'SyntheticEvent<Element, Event>'.

I understand this error and why this is happening, but I can't find a workaround to do this with typescript, any docs reference I should be looking at?

Nicholas Tower · Accepted Answer · 2020-11-20 15:06:02Z

1

Your types are fine, you just need to check if dataTransfer exists before using it:

const handleFileChange = (e: React.DragEvent | React.SyntheticEvent) => {
  const fileData = 'dataTransfer' in e ? e.dataTransfer : e.target;
};

answered Nov 20, 2020 at 15:06

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dharman · Accepted Answer · 2020-11-23 15:09:20Z

1

You can try something like this.

const TestComponent: React.FC = () => {

  // you can use any value you want as `type`
  const handleFileChange = (type: "input" | "drop", e: React.DragEvent | React.SyntheticEvent) => {
    if (type === "drop") {
      const fileData = (e as React.DragEvent).dataTransfer
    }

    if (type === "input") {
      const target = e.target
    }

    // if there are any other events
  }

  return (
    <div>
      <div onDrop={handleFileChange.bind(null, "drop")} />
      <input type="file" onChange={handleFileChange.bind(null, "input")} />
    </div>
  )
}

Just bind a type to the event so with each event type you can decide what you want to do.

edited Nov 23, 2020 at 15:09

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 20, 2020 at 15:18

Madhusudhan

1015 bronze badges

Collectives™ on Stack Overflow

Handling types when combining React HTML DOM events in a function call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related