Uncaught TypeError: Cannot read property 'preventDefault' of undefined
leopucci opened this issue · comments
Hey there!. Nice job doing this module!
I am trying to use this module with a custom button rendered but I am having problem with the event not being sent to handleClick.
I tried to solve, but even after digging I could not found what is wrong.
These two are two examples of detailed explanations around the problem:
https://www.jsdiaries.com/how-to-fix-cannot-read-property-preventdefault-of-undefined/
https://stackoverflow.com/questions/51004969/reactjs-cannot-read-property-preventdefault-of-undefined
I tried with simple buttons and everything works ok.
For the buttons i am using this module: https://www.npmjs.com/package/react-social-login-buttons
The strange thing is that I use the same button with react-google-login module and the button works just fine. So I´m in doubt if it is related to react-apple-signin-auth or react-social-login-buttons
What puzzles me is that i set onClick={renderProps.onClick} directly. So how could the module mess with anything?
Could anyone point me at some direction?
Thanks in advance.
Pucci
This error is frequently seen when creating a function inside a React.js component. It happens because of an incorrect binding of this. Sometimes the scope is not setup correctly which causes the event object to be undefined.
So, how can you fix the cannout read property preventDefault of undefined error? This can be fixed by using the following methods
Not executing the function in the callback handler (most likely culprit)
Binding the scope correctly with an arrow function
Using JavaScript’s .bind() to set the correct scope.
The button works with https://www.npmjs.com/package/react-apple-login
Is the responsibility of the apple module to prevent the post submit?
Isn't the developer responsibility to prevent this?
My button is designed with type='button' to prevent this, so there is no form submit, hence why is the apple module trying to prevent that?
I think that can be a module bad design or not, maybe not this module, the button one, but i don´t know. if anybody knows how to fix this on the module side, ideas are welcomed.
@leopucci Let me know if the solution is adequate, I simply avoid calling the preventDefault if e is not defined.
appleAuthHelpers module doesn't change at all, so I think this solution should fix your problem?
Good luck!
@a-tokyo thanks for your help.
It is working properly now.
Nice solution, this solves and does not affect/change the actual behavior of the module.
Thanks!