Getting SyntheticBaseEvent object instead of the simple Event when using React

Question

I'm have this very simple React code:

const onSelectTournament = (e) => {
    console.log(e);
};

And this HTML:

<div onClick={onSelectTournament}></div>

But on console, instead of obtaining the Event object I'm getting this hell object:

    SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: div.tournamentsBoxDescription, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelable: true
clientX: 382
clientY: 269
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 3
getModifierState: ƒ modifierStateGetter(keyArg)
isDefaultPrevented: ƒ functionThatReturnsFalse()
isPropagationStopped: ƒ functionThatReturnsFalse()
isTrusted: true
metaKey: false
movementX: 0
movementY: 0
nativeEvent: PointerEvent {isTrusted: true, delegateTarget: document, pointerId: 1, width: 1, height: 1, …}
pageX: 382
pageY: 269
relatedTarget: null
screenX: 382
screenY: 373
shiftKey: false
target: div.tournamentsBoxDescription
timeStamp: 102788.7999997139
type: "click"
view: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
_reactName: "onClick"
_targetInst: null
[[Prototype]]: Object

Someone can help me? I really appreciate it.

Shirleyshirlie

Answer 1

SyntheticEvent is an object that wraps the native Event in React, it gives you the same functionalities and more, like making sure you have the same behavior across browsers.

You can get the native Event by accessing the nativeEvent attribute of SyntheticEvent:

e.nativeEvent

You can check the documentation if you wanna know more about it.

Siegel

Answer 2

Ensure you are not calling a function twice at the same time. I had a similar challenge, turn out I was calling the same function from a single form at the same time.

Extremism

Answer 3

You can use React.MouseEvent type.

So, in your case:

const onSelectTournament = (e: React.MouseEvent<HTMLElement>) => { ... }

Huang

Answer 4

You need to pass the function like this

<div onClick={(e)=>onSelectTournament(e)}></div>

Impurity