ReactJS Tutorial - 13 - Event Handling 

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

I think best idea is to just make a root function and then inside that call that function...like onClick = { ( )=>{ something you want... }}...

I also bought tutorial on Udemy, but it dint help, I am so grateful for this tutorial.

don't let the curiosity die my friend!

U need to use bind

in a class you dont have functions, there are methods

just go through the next tutorial (video 14 ). you will get the solution.

Yes, we have the same question... I hope he answers..

exactly in the prev video, he did that too.

Left side para thesis doesn't effect..but don't put right side one

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.

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

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

function call means without clicking that console will be run but function means that function is linked with event not direct call

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?

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.

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 .

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.

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

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.

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

you don't use the keyword 'function' in class. In class you have methods, not functions ..

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,

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

@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 .

log+enter

simply import them like "import from "./style.css' "