In a class Component, I have something like this:
render() {
const { onClose } = this.props;
// later, in the return statement, inside a bunch of other nested markup:
<CloseIcon onClick={() => onClose()} className="qmCloseButton" />
<AnotherIcon onClick={() => onClose("/path1")} className="qmCloseButton" />
<AnotherIcon onClick={() => onClose("/path2")} className="qmCloseButton" />
}
The close handler prop that I pass in is:
const onCloseModal = urlAfterClose => {
if (urlAfterClose) {
history.push(urlAfterClose);
} else {
setShowSuccessModal(false);
}
};
Everything works. However, I always like to avoid arrow functions in my markup when I can, so I try this small change:
<CloseIcon onClick={onClose} className="qmCloseButton" />
<AnotherIcon onClick={() => onClose("/path1")} className="qmCloseButton" />
<AnotherIcon onClick={() => onClose("/path2")} className="qmCloseButton" />
But for the CloseIcon, the onClose method gets called with a class (looks like it might be the component itself?) instead of being called with no argument. It only works as an arrow function.
What am I missing here?
It's totally different syntaxes
onClick={onClose} =/= () => onClick={()=>onClose()}
onClick={onClose} in JavaScript this will pass all arguments available to onClose function, which second one runs without params
its same as
onClick={onClose} = onClick={(e)=>onClose(e)}