For those of you wondering why he used parentheses in the previous video and not here, it was because he was binding the 'this' keyword with the event handler so that he could change the state. If you're still confused just proceed to next video you will get your answer.
Man...thanks for these videos. I bought something in Udemy, and now I'm watching your videos after each Udemy chapter to get more clarity on the topic.
Very nice! You explain concepts by taking both functional and class component in account. This is indeed of much help and provides clarity! Most of your viewers wil agree to this.
So informative tutorial, you can easily follow along and understand the core concepts of react like state and props. These are really important to undersand. This guy is legend. thanx.
Brother you are next level! I am really really thankful to you for your this help. May God bless you with the best. I am taking your lectures but the problem is that i am not getting relevant examples to practice the stuff you are teaching. It will be so kind of you if you will give me some link or stuff like that so that i could practice the concepts. Thank you so much!!! :)
So I have a habit of pausing the video and trying it out on my own. As soon I saw him doing event handling, I paused the video and started writing the code myself. I mean, easy-peasey 😜 , what could go wrong with JS ? And I added this : onClick = {clickHandler()} - I reloaded and saw the console log already there without the button being clicked - got my answer as soon as I resumed at @3:17 🤦♂ Long Live JavaScript!
@Codevolution, Thanks ! One question, why I don't see multiple logs when I click the button multiple times? I just see a counter next to the file name getting incremented on clicks.
One thing I will add here even me at first glance got confused that ,Sir used function keyword ( function eventHandler () ) in function base components but didnot use that when using class i.e , eventHandle(){ console.log("button clicked") the reason is it is same syntax as or pure Js for classes like we add method in Js class like getResult(){ console.log("hello")} so functions are method in classe,no need of using function keyword hope this help
wow I spent like 3 hours pulling my hair out because I could not get onclick to work, turns out I had it in lower case instead of camel case, this is such a small thing that all the other youtubers and articles miss
Hi, I have a doubt. Please see the below code. import React, {Component} from 'react'; class Counter extends Component{ constructor(props) { super(props) this.state = { counter: 0 } } incrementCounter(){ this.setState({ counter: this.state.counter + 1 }, () => console.log("count increased to ", this.state.counter)) } render() { return Count - {this.state.counter} this.incrementCounter()}>Increment
} } export default Counter; When I run the above program, count increases by 1 when I click the button. But according to the tutorial when I remove parantheses to the incrementCounter the counter doesn't increase. Can anyone explain when?
Hey thanks for the video. Amazing . I just had one question. In setState video while calling increment(), why did we have to use arrow function and here in class we just used this.functionName. I tried increment thing this way but it gave an error. Kindly explain! Thanks
Thanks a lot for your awesome course. I wonder why in the functional component you used the word "function" (function clickHandler()), while in the class one not (clickHandler()). Cheers!
Hi I'm following your videos step by step and i have a question, why didn't you use arrow function in the handler same as you did in video 10 &11 ? and can we? thank you so much
I have a question. here you said we are not using round brackets as the it will be the function call. so, why in previous videos of counter we used this.changeMessage()}> There we used round brackets ? why?? please Explain??
Can anyone answer this question for me? (thanks in advance) ..... in the Class Component, at 4:40 , why do we NOT need the constructor and call to super() ??? i thought we needed those for call components? apparently i missed something. :/
Is it wrong to do it this way, it's working: function kliknuto() { alert('Button is CLICKED!'); } function overovano() { alert('Button is HOVERED!'); } function EvHandler() { return (
Here is the explanation of the answer in the reply.... Yeah so what actually happens is when you put parentheses on a function it gets called on that place automatically so what happend on that video was when he clicked on the button the arrow function started and since the increment function had () the increment function got called automatically .so basically it's just another way of calling a function indirectly , I hope you understood .
Because functions in class are methods and not regular function as well as they are the part of the class. Also I am adding this : you cannot define a function inside render in a normal way you can only use arrow functions
I have a query. Please resolve it. When we assign the onClick event handler with a function call, then why does it not log to the console on being clicked? What are the internals of having an event handler as a function call?
Hope this helps : see when you add parentheses with a function name like this ->fun() JavaScript treat this like a function call and automatically calls the function so when the component renders the function is already called . so now whether you click the button 1 time or multiple times it won't work because react will not re-render the component that is because react consider the function call on the time when it was render for the first time that's why .
@@Himanshu_Sharma.. Thanks for the elaborate explanation! I have one more question. Please answer if you can . suppose I have an array defined in this.state={arr:[]} and onClick of a button I want to push no. of times button clicked to arr then how can we do it? Basically I am confused with updating state of an array when an event is fired.
I really like the series so far. I am having a bit of confusion earlier in onClick(eg. Counter.js) we were passing an arrow function to call the handler but here we are just calling it by name. How do we differentiate when to use what.?
I am not an expert, but I will try to answer your question. if you define a function, which does not take any arguments, then you can give just the handler the function name, like onClick={functionName}. but if the function needs arguments, then you would have to use parenthesis to pass it like onClick={functionName('hello')}. once you do this, it is calling the function. so it returns void. but the onClick handler needs a function, not void. so you would have to use arrow function syntax if you need to pass an agurement. try it in vscode yourself, define function functionName() { console.log('hello') } and you can then use onClick={functionName} . Now, define function functionName(name){ console.log(name)}, and vscode will error saying the function call is returning void and thats the wrong type for the onClick handler. but if you use onClick={()=>functionName('Steve')} then your giving the onClick handler what it wants, a function. an anonymous one, but a function nonetheless.
function clickHandler() { console.log("Button clicked") } clickHandler( ) --->here u have to call the function else this function won't be called } }>Click This is not suggested bcoz this makes the code difficult to read.
cause it is pure Javascript Syntax if you had read about how to use class in Js and how functions (means method) are added in That class so the same rule here too like there means in pure js we can use like getResult(){ console.log("hello")} so this is how function(we can it method in class) are used in class
this anemia :(:(:( Vishwas I wanted to use arrow function instead of regular function on clickHandler. For Functional component const FunctionClick = () => { const clickHandler = () => { console.log('Clicked'); }; return (
Click
); }; For Class component class Classclick extends Component { const clickhandler = () => { console.log('Clicked'); }; render() { return (
Pls Clicke Me
); } } This throws me an error. I had to change const clickhandler to just clickhandler. What is going on???
Is it necessary to create button in the same file in which i have my function. What if my button is in different file along with other component and i want to link the onClick fucntion which is in different file? How do i do that. I'm new to react, pls help me out.
Even if i write onClick={clickHandler} rather than onClick={this.clickHandler} in js file for it is still giving the same output. I want to know is there any difference or something..? Pls pickup.
Thanks you sir, but I have a question in setState() topic for updated value by using onClick=()👈-(that method name with paranthasis) . but in this video your using without parenthesis . Here also doing onCilck. How it is sir ...?
Yeah so what actually happens is when you put parentheses on a function it gets called on that place automatically so what happend on that video was when he clicked on the button the arrow function started and since the increment function had () the increment function got called automatically .so basically it's just another way of calling a function indirectly , I hope you understood . By the way great catch !! I was looking for this comment
is not correct to write something like the following? class MyComponent extends Component{ function myFunction(){ } } Have to remove function, only keep myFunction()?
in functioncClick : function clickHandler() { console.log("button clicked"); } In classClick : handleClick() { console.log("inside class click"); } What is the difference between these two ? can anyone explain it ?
Can create a function inside another function in functional/class component : onclick="myFunction()" vs onClick={myFunction} if added parantesis at end - {myFunction()} - it becomes function call - and method gets called, even before calling..... WoW...... also if its arrow function, ( ) is allowed, next video if its class: onClick={this.myFunction}
In a normal HTML application, we pass the event handler along with the round brackets inside double-quotes. What is the difference between that and passing the function reference inside curly braces in react?
function clickHandler() { console.log("Button clicked") } clickHandler()--->here u have to call the function else this function won't be called }}>Click not suggested bcoz code is difficult to read so better define the function outside
I'm very new at this, I'm working on learning React Native, and I can't seem to wrap my head around how the hell i should work with events outside my file. I'm currently working on an exercise that asks me to create all my components separately. I have created a file (Input.js) where i have a password input that has a function where I can access the input text the user is texting, but i can't access the event, and the event changes on my Button.js file, anyone able to help???? I'm so stuck on this one, i'd like to avoid using redux or external libraries because i've been told it's possible in this scenario! PLEASE SAVE ME FROM THIS MISERYY!!
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](http://i.ytimg.com/vi/U9sDK8zTJ8Y/mqdefault.jpg)
![[LIVE] : ONE ลุมพินี 78 | คู่เอก "ปกรณ์ vs ฟาบิโอ"](http://i.ytimg.com/vi/LSOmgl0Th2c/mqdefault.jpg)
For those of you wondering why he used parentheses in the previous video and not here, it was because he was binding the 'this' keyword with the event handler so that he could change the state. If you're still confused just proceed to next video you will get your answer.
thank you, it was exactly what I was wondering
Thanks man I just came here for this doubt,
and he also used arrow function there and not here why?
As far as my understanding, it's cuz he used arrow function before that's why he used parantheses
Like many already said, "You are a legend". Perhaps the best trainer I have ever come across
Man...thanks for these videos. I bought something in Udemy, and now I'm watching your videos after each Udemy chapter to get more clarity on the topic.
I also bought tutorial on Udemy, but it dint help, I am so grateful for this tutorial.
Very nice! You explain concepts by taking both functional and class component in account. This is indeed of much help and provides clarity! Most of your viewers wil agree to this.
So informative tutorial, you can easily follow along and understand the core concepts of react like state and props. These are really important to undersand. This guy is legend. thanx.
Brother you are next level! I am really really thankful to you for your this help. May God bless you with the best. I am taking your lectures but the problem is that i am not getting relevant examples to practice the stuff you are teaching. It will be so kind of you if you will give me some link or stuff like that so that i could practice the concepts. Thank you so much!!! :)
thank u so much for the better explanation of components ..really before i was confusing the two...
You´re number ONE!!! You born to teach!
An observation, that the passing event handler as a function will work if you use an
arrow function inside the paranthesis.
So I have a habit of pausing the video and trying it out on my own. As soon I saw him doing event handling, I paused the video and started writing the code myself. I mean, easy-peasey 😜 , what could go wrong with JS ? And I added this : onClick = {clickHandler()} - I reloaded and saw the console log already there without the button being clicked - got my answer as soon as I resumed at @3:17 🤦♂ Long Live JavaScript!
Just wanna say you're a great teacher. Thanks
The best React JS tutorial ever!
Class and Functional Components. Perfect. Wish everyone would do that. Also, upload in 1080p.
@Codevolution, Thanks ! One question, why I don't see multiple logs when I click the button multiple times? I just see a counter next to the file name getting incremented on clicks.
Thank you sir. I can understand from your explanation. It's really helpfull to do my homework. From Indonesia
Dude, thank you for this perfect tutorial!!
More and clear knowledge in just 7 Mints... Just Wow😊
One thing I will add here even me at first glance got confused that ,Sir used function keyword ( function eventHandler () ) in function base components but didnot use that when using class i.e , eventHandle(){
console.log("button clicked")
the reason is it is same syntax as or pure Js for classes like we add method in Js class like
getResult(){
console.log("hello")}
so functions are method in classe,no need of using function keyword
hope this help
it's a little strange looking at this when being a java script developer for years, whats the best way to add multiple events of the same trigger.
Man, this was so helpful. Thanks a lot!! ♥
wow I spent like 3 hours pulling my hair out because I could not get onclick to work, turns out I had it in lower case instead of camel case, this is such a small thing that all the other youtubers and articles miss
Very helpful series on react.... thankyou sir
best resources in the internet ( include purchased with money)
The best guy for react for sure.
You are the best Teacher ❤️🙏🏻
Perfect tutorial. Thank you Vishvas 👍
Hi, I have a doubt. Please see the below code.
import React, {Component} from 'react';
class Counter extends Component{
constructor(props) {
super(props)
this.state = {
counter: 0
}
}
incrementCounter(){
this.setState({
counter: this.state.counter + 1
}, () => console.log("count increased to ", this.state.counter))
}
render() {
return
Count - {this.state.counter}
this.incrementCounter()}>Increment
}
}
export default Counter;
When I run the above program, count increases by 1 when I click the button. But according to the tutorial when I remove parantheses to the incrementCounter the counter doesn't increase. Can anyone explain when?
U need to use bind
Another superb video
Hey thanks for the video. Amazing . I just had one question. In setState video while calling increment(), why did we have to use arrow function and here in class we just used this.functionName. I tried increment thing this way but it gave an error. Kindly explain! Thanks
just go through the next tutorial (video 14 ). you will get the solution.
Yes, we have the same question... I hope he answers..
I'm a beginner in React and I couldn't have asked for a better start
if we type js function after export in class component,and use event handler as functionone()}> it works.....Is it good way to do it?
exactly in the prev video, he did that too.
Left side para thesis doesn't effect..but don't put right side one
Thanks a lot for your awesome course. I wonder why in the functional component you used the word "function" (function clickHandler()), while in the class one not (clickHandler()). Cheers!
in a class you dont have functions, there are methods
This tutorial is AWESOME, Thank you so much
Hi I'm following your videos step by step and i have a question, why didn't you use arrow function in the handler same as you did in video 10 &11 ? and can we? thank you so much
completed video 13. Thank you 🙂
what is the different if i remove export or not removing export inside class component? I still dont get it :(
I have a question.
here you said we are not using round brackets as the it will be the function call.
so, why in previous videos of counter we used this.changeMessage()}>
There we used round brackets ? why?? please Explain??
What if you do a function call inside an anonymous function?
clickHandler() }>Click
your teaching is Awesome Man, I Really love this Tutorial
Man, you are great! Thanks a lot!
Why should we not use braces in event handling and why should we use braces in method
Your tutorials are awesome!!
Can anyone answer this question for me? (thanks in advance) ..... in the Class Component, at 4:40 , why do we NOT need the constructor and call to super() ??? i thought we needed those for call components? apparently i missed something. :/
You are a gem 💎
I had a doubt why we used function keyword for clickHandler in fuctional component and y not used function keyword in class component
Is it wrong to do it this way, it's working:
function kliknuto() {
alert('Button is CLICKED!');
}
function overovano() {
alert('Button is HOVERED!');
}
function EvHandler() {
return (
kliknuto()} onMouseOver={() => overovano()}>Dugme
)
}
???
Can anyone tell me is class components are necessary when we are good with functional
Can you plz elaborate whats the difference in function and function call in event handler? Whythey behave different?
function call means without clicking that console will be run
but function means that function is linked with event not direct call
awesome explanation 🙏
Thank you sir for such videos.
I dont know its an update in React i guess but we can't name FunctionClick for file now;...
3:50 if we have to put parameter on button what should we do?we can't use () at onClick right?
Sir what should i do to bringfunctional component by typing rfce? I mean which plugin should i install ?
ES7 / React / Redux snippets
@@Codevolution I used 'ES7 / React / Redux snippets', but it didn't work. For me 'ES7 React/Redux/GraphQL/React-Native snippets' worked.
Thanks for your videos! you are amazing!
In SetState video we did event call and we called method using parenthesis, Why we did not use this.fucntion there? Can somebody help me.
@Gabriel Daniluk thanks man
@Gabriel Daniluk That helped man!!
Thanks a lot!!
Here is the explanation of the answer in the reply....
Yeah so what actually happens is when you put parentheses on a function it gets called on that place automatically so what happend on that video was when he clicked on the button the arrow function started and since the increment function had () the increment function got called automatically .so basically it's just another way of calling a function indirectly , I hope you understood .
Why in class component we are not using function keyword??.I mean why u are not writing function clickhandler()
Because functions in class are methods and not regular function as well as they are the part of the class. Also I am adding this : you cannot define a function inside render in a normal way you can only use arrow functions
I have a query. Please resolve it. When we assign the onClick event handler with a function call, then why does it not log to the console on being clicked? What are the internals of having an event handler as a function call?
Hope this helps : see when you add parentheses with a function name like this ->fun() JavaScript treat this like a function call and automatically calls the function so when the component renders the function is already called . so now whether you click the button 1 time or multiple times it won't work because react will not re-render the component that is because react consider the function call on the time when it was render for the first time that's why .
@@Himanshu_Sharma.. Thanks for the elaborate explanation! I have one more question. Please answer if you can . suppose I have an array defined in this.state={arr:[]} and onClick of a button I want to push no. of times button clicked to arr then how can we do it? Basically I am confused with updating state of an array when an event is fired.
I really like the series so far.
I am having a bit of confusion earlier in onClick(eg. Counter.js) we were passing an arrow function to call the handler but here we are just calling it by name. How do we differentiate when to use what.?
I am not an expert, but I will try to answer your question. if you define a function, which does not take any arguments, then you can give just the handler the function name, like onClick={functionName}. but if the function needs arguments, then you would have to use parenthesis to pass it like onClick={functionName('hello')}. once you do this, it is calling the function. so it returns void. but the onClick handler needs a function, not void. so you would have to use arrow function syntax if you need to pass an agurement. try it in vscode yourself, define function functionName() { console.log('hello') } and you can then use onClick={functionName} . Now, define function functionName(name){ console.log(name)}, and vscode will error saying the function call is returning void and thats the wrong type for the onClick handler. but if you use onClick={()=>functionName('Steve')} then your giving the onClick handler what it wants, a function. an anonymous one, but a function nonetheless.
i think as soon as you put those parenthesis in there, it makes it a call to a function, not a reference to a function.
@@aeronwolfe7072 It means normal function only returns void we can change the return type right?
can we write the handler in onClick as arrow function notation like in the previous video of state
yes you can--->
{
function clickHandler()
{
console.log("Button clicked")
}
clickHandler( ) --->here u have to call the function else this function won't be called
} }>Click
This is not suggested bcoz this makes the code difficult to read.
any reason why you wrote "function clickHandler() {}" for the Functional component and just "clickHandler() {}" for the class component?
cause it is pure Javascript Syntax if you had read about how to use class in Js and how functions (means method) are added in That class so the same rule here too
like there means in pure js we can use like
getResult(){
console.log("hello")} so this is how function(we can it method in class) are used in class
Why it gives error if we write function before click handler in class component
Great video!!
btw at 2:26 what font are you using which automatically converts => to an arrow?!
I have a doubt, in the previous video where we created the subscribe button, we placed the parentheses, why?
He made a mistake id bet but agree i found it confusing too
he was using arrow syntax of which you have to put paranthesis
According to MDN, when an arrow function returns an object literal expression you need to parenthesize the body of the function
Very Helpful Video ❤️
You're a fucking genius dude. So clear in your explanations damn
this anemia :(:(:( Vishwas I wanted to use arrow function instead of regular function on clickHandler.
For Functional component
const FunctionClick = () => {
const clickHandler = () => {
console.log('Clicked');
};
return (
Click
);
};
For Class component
class Classclick extends Component {
const clickhandler = () => {
console.log('Clicked');
};
render() {
return (
Pls Clicke Me
);
}
}
This throws me an error. I had to change const clickhandler to just clickhandler. What is going on???
Do any of you guys know emmet or other shortcut for writing console.log("") in VisualStudio Code?
log+enter
Is it necessary to create button in the same file in which i have my function. What if my button is in different file along with other component and i want to link the onClick fucntion which is in different file? How do i do that. I'm new to react, pls help me out.
Even if i write onClick={clickHandler} rather than onClick={this.clickHandler} in js file for it is still giving the same output. I want to know is there any difference or something..? Pls pickup.
its because when you are using this keyword outside the class its refferring to window . so in short it's make no difference outside class .
How can I pass an argument to event method?
thank you sir
Thanks you sir, but I have a question in setState() topic for updated value by using onClick=()👈-(that method name with paranthasis) . but in this video your using without parenthesis . Here also doing onCilck. How it is sir ...?
Yeah so what actually happens is when you put parentheses on a function it gets called on that place automatically so what happend on that video was when he clicked on the button the arrow function started and since the increment function had () the increment function got called automatically .so basically it's just another way of calling a function indirectly , I hope you understood . By the way great catch !! I was looking for this comment
@@Himanshu_Sharma.. I'm also looking for the same comment, thanks man
I did the same thing like you , but the button don't displayed when I had execute the project !! help please
is not correct to write something like the following?
class MyComponent extends Component{
function myFunction(){
}
}
Have to remove function, only keep myFunction()?
in functioncClick :
function clickHandler() {
console.log("button clicked");
}
In classClick :
handleClick() {
console.log("inside class click");
}
What is the difference between these two ?
can anyone explain it ?
you don't use the keyword 'function' in class. In class you have methods, not functions ..
Can create a function inside another function
in functional/class component : onclick="myFunction()" vs onClick={myFunction}
if added parantesis at end - {myFunction()} - it becomes function call - and method gets called, even before calling..... WoW...... also if its arrow function, ( ) is allowed, next video
if its class: onClick={this.myFunction}
Thank you
In a normal HTML application, we pass the event handler along with the round brackets inside double-quotes. What is the difference between that and passing the function reference inside curly braces in react?
We also Use function reference when you do that in pure Jaavascript not in html coding
and for curly braces that is react syntax like other lang have,
excellent 👍🏻
Thank you Sir!
why we did'nt use arrow function to create handlers? any help?
you can use-->
{
function clickHandler()
{
console.log("Button clicked")
}
clickHandler()--->here u have to call the function else this function won't be called
}}>Click
not suggested bcoz code is difficult to read so better define the function outside
what if you want to pass a value to an event handler?
One doubt, You put paranthesis in previous video for incrementing the counter?
In that video, he was doing function call but here he wants event handler to be just a function not making the call to the function.
I am on a go now asm content
Thanks, it is working
I'm very new at this, I'm working on learning React Native, and I can't seem to wrap my head around how the hell i should work with events outside my file. I'm currently working on an exercise that asks me to create all my components separately. I have created a file (Input.js) where i have a password input that has a function where I can access the input text the user is texting, but i can't access the event, and the event changes on my Button.js file, anyone able to help???? I'm so stuck on this one, i'd like to avoid using redux or external libraries because i've been told it's possible in this scenario! PLEASE SAVE ME FROM THIS MISERYY!!
Thank you..
how bout insertion of parameters into that method?
how to add css to these js files (Component ) ? :-/
simply import them like "import from "./style.css' "
ntaaa chiikourrrrr
tysm
Thanks!
Can we use using event listeners
2:45 function inside other function
3:28 function or function()
Plz make a video on drag and drop of elements
Are there any notes made for the whole series?
love you very much
ty
Make a video how to send data to api and fetch data from api
You should go to your mother and ask her why she didn't teach you how and when to say "please".
@@ministerdjspliff haahahahaha
Please create a video explaining synthetic event
3:33 event Handler function without parenthesis