ReactJS Tutorial - 14 - Binding Event Handlers
Vložit
- čas přidán 6. 09. 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
In this video, lets learn how to bind event handlers in React components.
"so in this video, I will go over all of them"
What a legend.
4:25 'this' keyword is undefined because this used with a function returns 'window' object on the browser and 'global' object inside nodejs environment. Since 'react strict mode' is enabled, it is returning 'undefined'.
Yes. This is the actual reason it gives undefined.
please elaborate a little
hey please elaborate more
arrow functions don't create their own context so there it worked without binding.
@@akashgupta1353 First of all "this" keyword points the Parent element on which it is called . So when you use a Named function with the "this" keyword inside it , it isn't binded to anything at all ..So the control passes to the "Window" element . So the Window element acts as a parent to the Named function . We see "Undefined" here because we use "Strict mode " in Javascript . What Strict Mode does is, if there is a named function( without any Bind method ) it transfers control to the parent element(window element) as i said ..this action is blocked by the strict mode ..So you see "undefined" in there ...However if you take off the strict mode ,you should see it will return the Window object ... The One Stop Solution to all of this is using arrow functions which takes parent element as the Class and not the window object .
I rarely comment on CZcams but your tutorial and the way you explain is mind blowing i wish if I can support you financially now, but one day I will when I get a job. Thanks a lot for great content
True! Clear and concise! Very helpful.
I hope you already landed your dream job
This channel is definitely underrated. It deserves more attentions!! Great work man.
4:30 why event binding is important
5:00 use bind()
6:20 2nd method: use the arrow function
7:57 3rd method (official and mostly used): binding from constructor
9:40 4th method: define the trigged function as an arrow function
(this) was great explanation
haaha yes (this) was
this.setState({
comment: 'Haha, coding joke'
})
@@moderncloth682 undefined
You explain concepts and ideas so well a mere child will understand you. Great job!
1. Binding in render
2. Arrow function in render
3. Binding in the class constructor
4. Class property as arrow function
Great presentation. I would recommend a variation on binding in the constructor. Instead bind on method creation in the class.
clickHandler = function(){ ... }.bind(this);
This keeps the binding with the function when it is created.
After a hell lot of reading stackoverflow and blogs, I got everything under the same roof and now every single approach seems relatable. Thanks a ton man! God bless you.
One of the best tutor ( I watched too many tutorials for react but this one is really the best...Even he taught how to deal with logical errors )
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions the this keyword always represents the object that defined the arrow function. This is from W3School.
showed all the mistakes we could possibly make and proceeded to fix all of them one by one. Thanks a ton for this tutorial. You are a legend.
I honestly felt like a dumbass until I stumbled upon your channel. You explain everything in such a chill manner in which I can understand easily... highly underrated!
Absolutely exellent.
My threshold to continue with React has been set
from now.
Thank you very much.
Most underrated channel with mind-blowing content with clean and crisp explanation. I rarely comment for a tech YT but this channel is beyond amazing. Many wow factors in the explanation and explanation of the reasons behind the regular usage.
Bruh! the best react tutorial on the whole YT. Small yet detailed videos.
One of the best teachers on CZcams, thanks bruddah!
FinallFinally!!!! A video that actually helped me and explained it so well! Thank you so much!!
It's really great how you give examples for both class based and functional components.
I was exactly looking for something like this and honestly I salute you for the way you explained and structured the code for us to learn. I feel like an expert Reactjs Developer after watching this lol
You guys are professional teachers. Awesome..
in 2023 ur videos are the best from all other tutors
You made ReactsJs very simple and clean to understand.. Great Work and Kudos
After long research, i finally find something which satisfies me. Thanks Man!
"this" is undefined because this works perfectly if the function is in a method or have object as a wrapper but here we are wrapping inside a class not object that's why this is undefined so binding it is a solution inside that constructor else use arrow function
Arrow functions are very useful in this case. I prefer the last approach.
Best explanation of bind() ! As a Java and C++ guy in school, it was easy to understand this. OOP for the win
Also, Vishwas, this is an excellent series. Well done mate.
Excellent brief tutorial that covers topic well in a few minutes time. Thanks.
This tutorials are very much interested not even single minute am feeling bored and very much detail on each concept thanks my dear.
This is the first video I've seen that effectively explains 'bind(this)' well. Thank you!!
I think I need to comment on your videos. You are genius and thanks for such an incredible explanations. You deserve more than 5⭐⭐⭐⭐⭐⭐. I was confused with react ideology till your videos saved me lol. Bravooo!!!
This course so far is the most intuitive one, I'm loving it !
You're a legend, man. Keep it up.
Just Excellent and Simplest way of explaining all cases with sequence and basic example. Keep up great work.
For beginners this video are must watch.. I got lot of confusion but after watching these videos everything is clear now..
such a clean way of teaching!
great tutorial, very helpfull, thank you
Vishwas, you rock man! Thanks so much for these beautiful tutorials. Much appreciated.
sir i like your way of teaching...you explain every concept in a easy way
Yes. This tutorial is amazing. As a beginner I am getting to learn alot. Very good work Mr Vishwas
I am going to watch all the videos just because the way you explained
You deserve more seubscriber and more viewer Sir, i started this reactJS Tutorial series to prepare my self in learning your nextJS Tutorial series. Thank you so much.
What a great explaination man, I understood the basic of react from your course, thanks for sharing
One of the best tutorials for Javascript and React library, I must say it`s a great contribution for developer community thankyou so much appreciate it.
Generally speaking in JavaScript, you can change the context of the "this" keyword of any function,not including the arrow function for sure, using the apply, call or bind methods by passing the object you want the "this" keyword to refer to as the first parameter of these methods
But here we can only use the bind method since both apply and call methods will call the function directly without the event a.k.a the click event, making your application enters a sort of infinity function calls
I don't get it like haven't we already used onClick event listener in the previous video where we made a counter
Thank you for providing this content. Great Work.
you're a savior. Thankyou so much 😊😊🔥🔥
thank you so much for your classes, you are the best teacher
please upload javascript classes
As fer I understand in 3:54 , under the button the value of this is buttonObject. So literally {this.clickHandler} is same as {buttonObject.clickHandler}. Bt the outer clickHandler where clickHandler method is definedn is in scope of EventBind object. So this value is EventBind outside. So we can say this.state is same as EventBind.state. which is not accessible to the event handler in button. Bt for arrow function the this value is same as enclosed lexical context means for arrow function this value becoms EventBind object. So this.state is accessible if we use arrow function. thats wthe reason for arrow function we dont get undefined also...
Pls correct me if wrong. It will be helpful for me to clear the concepts😊
Thanks for all the effort Vishwas! I have been following all your tutorials. They are simple and straightforward. Would like to know if you could help creating a video about basic idea behind Redux/Flux. All the other tutorials out there are really confusing :(
The main thing in here was to related the react architecture of components with this, which you have skipped over. That's the main explanation every other thing is pretty common with every tutorial
Excellent comprehensive and clear instruction. Very helpful. Thank you.
Why does writing arrow function within class and passing it as event handler, makes it run infinite times??
This tutorial is very useful for me, Thank you Codevolution !
Thank you for the amazing and simple explanation!
isn't this video is same as setState method video that you taught earlier .except you taught few other methods to bind.
great work man. thanks
best best best channel in 2024
Your video helps me tremendously. Thank you so much. You are a great teacher
To tackle it either we can bind or use an arrow func!
Excellent explanation
I think the first solution will be better if you place .bind at the constructor like this:
constructor(props) {
super(props);
this.state = {
message: 'Hello',
};
this.clicker = this.clicker.bind(this);
}
The benefit is that it woun't rerender every time the button has clicked.
Update: my bad, you've already told it, but i wrote this comment when i watched only half of the video
You are legend man
Why do we call the eventHandler like this eventHandler() while using arrow functions?? And not while using the bind keyword?
Hi - Great presentation Gopinath ! I have a question - How come the "this.state " work in video 11 when we updated the count using setState ? Thanks
Great video! Helped me so much! keep up the great work.
I really love your video brother.
thanks a lot for
clearing my doubt
Congratulations my friend, that was a very good tutorial
try this in your browser console and see the difference:
var obj = {
checkThis: () => {
console.log(this);
}
}
obj.checkThis();
and in comparison to that:
var obj = {
checkThis: function() {
console.log(this)
}
}
obj.checkThis();
8:00 third approach of event binding
completed video 14. Thank You : -)
I like your all videos. Thanku for making videos on React
Super clear explanation!
9:36 4th approach of event binding
After introduction of hooks in react, how much of a importance does 'this' keyword still has??
for old project
excellent teaching
Short course but on point.
This is gold!!
Thanks!
Excellent explanation!
The tutorial are good but most of them are based on classes. And now classes are out of function....
I understood why 'this' keyword doesn't work, I don't know if you explained it but I don't get why 'bind(this)' works.
Thanks for the work!
Me too
awesome explanation 🙏
HI Vishwas,
So far i was able to follow you in tutorial. In this Video , i have dpubt as, we have used button event to change message and increment value in previous tutorials . How that function invocation different in here from Event calling?
perfect course , thank you , i'm from thailand
Very good tutorials
Thank you so much! Great Tutorial.
If i wasn't familiar with JS this keyword and prototyping I'd be confused as swarming forest bee.
thank you!
Thank you a lot!
Approach number 4 is easily the cleanest
Thank you very much! This course it really useful. I have a question: if I want to change the message from state to state by clicking, what should I do?
Thanks man!!!
Whats the difference between normal function and arrow function made in the 4th method. Plz explain
This is really very helpfull tutorial
I prefer the 4th option, is it still an experimental feature ?
great tutorial, thnx!
i liked ur explanation , thanx a lot man