Why event.preventDefault undefined?

Deal with someone else's code.
Came across this:

Component code:
import React { Component } from 'react';

export default class TabSwitchItem extends Component {

 constructor(props) {
super(props);
}

 clickHandler = (a, event) => {
console.log(a);
console.log(event);
console.log(event.preventDefault());
};

 let { item } = this.props;

 render() {

 const result = <a onClick={() => this.clickHandler('1', event)}>{item.title}</a>;

 return (
<React.Fragment>
 { result }
</React.Fragment>
)
}
}

The result:
1

MouseEvent {isTrusted: true screenX: 1771, screenY: 192, clientX: 1771, clientY: 58, ...}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 1771
clientY: 58
composed: true
as the ctrlkey property: false
currentTarget: null
defaultPrevented: true
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 80
layerY: 21
metaKey: false
movementX: 0
movementY: 0
offsetX: 81
offsetY: 22
pageX: 1771
pageY: 245
altKey: falsebubbles: truebutton: 0buttons: 0cancelBubble: falsecancelable: trueclientX: 1771clientY: 58composed: truectrlKey: falsecurrentTarget: nulldefaultPrevented: truedetail: 1eventPhase: 0fromElement: nullisTrusted: truelayerX: 80layerY: 21metaKey: falsemovementX: 0movementY: 0offsetX: 81offsetY: 22pageX: 1771pageY: 245path: (22) [a.b-tabs-header__item, div.b-tabs-header__item-wrap, div.b-tabs-header__items-list div.b-tabs-header__wrapper div.b-tabs-header.b-tabs-header_adapt_default.b-tabs-header_theme_folder, div.b-map-data__tabs-header div.b-map-data__wrapper div.b-map-data.b-map-data_adapt_default, div.b-map__map-data, div.b-map__info-block div.b-map__wrapper div.b-map.b-map_adapt_default.js-init, div.page__map div.page__map-block div.page__container.page__container_map main.page__main-holder, div.page__main-content-wrap, div#root, body.page, html.pp-mod_support_spam, document, Window]relatedTarget: nullreturnValue: falsescreenX: 1771screenY: 192shiftKey: falsesourceCapabilities: InputDeviceCapabilitiesfiresTouchevents: false__proto__: InputDeviceCapabilitiessrcElement: a.b-tabs-header__itemtarget: a.b-tabs-header__itemtimeStamp: 4215.439999999944 toElement: a.b-tabs-header__itemtype: "click"view: Window {postMessage: d, blur: d, focus: d, close: d, parent: Window, ...}which is: 1x: 1771y: 58__proto__: MouseEvent
TabSwitchItem.js:12

undefined

That is the missing event.preventDefault().
March 19th 20 at 09:08
1 answer
March 19th 20 at 09:10
Solution
1.
const result = <a onClick={event => this.clickHandler('1', event)}>{item.title}</a>;


2. The challenge event.preventDefault() not return anything. In other words, the console should be undefined.
Still there:

c {dispatchConfig: {...}, _targetInst: Ue, nativeEvent: MouseEvent, type: "click", target: a.b-tabs-header__item, ...}
altKey: null
bubbles: null
button: null
buttons: null
cancelable: null
clientX: null
clientY: null
as the ctrlkey property: null
currentTarget: null
defaultPrevented: null
detail: null
dispatchConfig: null
eventPhase: null
getModifierState: null
isDefaultPrevented: ƒ gb()
isPropagationStopped: ƒ gb()
isTrusted: null
metaKey: null
movementX: null
movementY: null
nativeEvent: null
pageX: null
pageY: null
relatedTarget: null
screenX: null
screenY: null
shiftKey: null
target: null
timeStamp: null
type: null
view: null
_dispatchInstances: null
_dispatchListeners: null
_targetInst: null
__proto__: c
- jovani.Brek commented on March 19th 20 at 09:13
@jovani.Brek, you would have to start with the basics of JavaScript to understand. Calling the preventDefault() - returns nothing. - Montana commented on March 19th 20 at 09:16
@Montana, Thank you, it worked. Threw off an event object, because there is even after the transfer of properties to a function was not preventDefault - jovani.Brek commented on March 19th 20 at 09:19
Read carefully
https://dev.to/xnimorz/dealing-with-event-handlers...
Note this paragraph

When we declare the callback as onClick={this.fetchUsers} every render call will pass the same reference to onClick the button.
At the time, when we use onClick={() => this.fetchUsers()} each render call will init new function () => this.fetchUsers() and will pass it to the button onClick prop. It means, that nextProp.onClick and prop.onClick won't be equal and even if we use a PureComponent instead of button it will be re-rendered.
- Imani89 commented on March 19th 20 at 09:22
@Imani89, Yes it is clear. But in terms of links isn't a crime if there is a need to convey id, say in a loop. Another thing is that the code author, to put it mildly, pointless. He with the same success you can use your unity directly in the handler,:
clickHandler = e => {
console.log('1');
console.log(e);
console.log(e.preventDefault());
};

and call:
<a onClick={this.clickHandler}>{item.title}</a> - Montana commented on March 19th 20 at 09:25

Find more questions by tags ReactJavaScript