ReactJS Tutorial - 13 - Event Handling

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

completed video 13. Thank you 🙂

Thank you

Can anyone tell me is class components are necessary when we are good with functional

ntaaa chiikourrrrr
tysm

can we write the handler in onClick as arrow function notation like in the previous video of state

why we did'nt use arrow function to create handlers? any help?

what is the different if i remove export or not removing export inside class component? I still dont get it :(

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 ?

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

The best guy for react for sure.

your teaching is Awesome Man, I Really love this Tutorial

Thank you..

I dont know its an update in React i guess but we can't name FunctionClick for file now;...

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}

please make a video Manually translate React js please

Do any of you guys know emmet or other shortcut for writing console.log("") in VisualStudio Code?

♥️♥️♥️♥️

awesome explanation 🙏

ty

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!!

Why should we not use braces in event handling and why should we use braces in method

I had a doubt why we used function keyword for clickHandler in fuctional component and y not used function keyword in class component

What if you do a function call inside an anonymous function?
<button onClick = { ()=> clickHandler() }>Click</button>

The best React JS tutorial ever!

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 <div className="testing">
<h3>Count - {this.state.counter}</h3>
<button onClick={() => this.incrementCounter()}>Increment</button>
</div>
}
}

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?

Perfect tutorial. Thank you Vishvas 👍

Very Helpful Video ❤️

Class and Functional Components. Perfect. Wish everyone would do that. Also, upload in 1080p.

Very helpful series on react.... thankyou sir

those code snippets are not working

I'm a beginner in React and I couldn't have asked for a better start

thank you sir

excellent 👍🏻

You are the best Teacher ❤️🙏🏻

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 <button onClick {() => this.changeMessage()}>
There we used round brackets ? why?? please Explain??

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

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?

An observation, that the passing event handler as a function will work if you use an
arrow function inside the paranthesis.

Thank you sir. I can understand from your explanation. It's really helpfull to do my homework. From Indonesia

Man, this was so helpful. Thanks a lot!! ♥

is not correct to write something like the following?

class MyComponent extends Component{
function myFunction(){

}

}

Have to remove function, only keep myFunction()?

Thank you sir for such videos.

You're so good at teaching my friend. +15012

Can we use using event listeners

what if you want to pass a value to an event handler?