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.
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.
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.