Getting SyntheticBaseEvent object instead of the simple Event when using React

user_5671571 0
Viewed 2619

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.

reactjs html javascript
2 Answers

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 behaviour accros browsers.

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

e.nativeEvent

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

user_152886410

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.

user_122331280
Related