ReactJS Tutorial – 13 – Event Handling
- December 23, 2023
- Posted by: MainInstructor
- Category: BASIC C Go JavaScript React
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703342941_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 13 – Event Handling
Any web application you create typically tends to have user interaction when the user interacts with your application events are fired for example mouse clicks mouse over key press change event and so on the application must handle such events and execute the necessary code in this video
Let’s see how to handle events in react we will focus on just the click event but the concept holds good for other events as well let’s begin with functional components I’m going to create a new file called function click dot J s within the file I am going to create a
New functional component using the react snippet our f c/e as part of the HTML or JSX I will add a button that says click next let me add the component in the app component so within the return statement function click make sure to import it as
Well if you save the files and take a look at the browser you should be able to see the click button when the user clicks on this button a click event is fired our goal is to capture that click event and execute some basic code the
First point you have to make note of is react events are named using camel case rather than lowercase in plain HTML and vanilla JavaScript you would specify on click but in react it has to be camel cased so C has to be uppercase on click the second point is with JSX
You pass a function as the event handler rather than a string so instead of click handler within double-quotes we are going to have clickhandler within curly braces now let’s define the click handler function remember in JavaScript it is very much possible to define a function within another function so inside the
Functional component we can define our click handler so function click handler and within the body we simply log to the console button clicked let’s save this and test it out if I open the developer tools and the console tab and click on the button you should see the message button clicked in
The console are click event handling works as expected now let me point out one of the more common mistakes we as beginners tend to make with event handling in our code you can see that on click we pass the function as the event handler pay close attention to the absence of parentheses
If you do add parentheses it becomes a function call and that is not what we want we want the handler to be a function and not a function call let’s quickly see what happens if we do leave the parentheses I’m going to save this and go back to the browser and you
Can see that in the console the message button click is already logged and this is not from our previous button click so I’m going to clear the log refresh you can see that button clicked is already logged and now when I click on the button nothing happens no message is
Logged in the console now the scenario becomes worse in class components when your click handler changes the state of the component the component constantly rear Enders and you might see an infinite number of messages in the console so what I want you to keep in mind is that the event handler is a
Function and not a function call do not add the parentheses alright next let’s take a look at event handling in class components I’m going to create a new file called class click yes and within the file I’m going to use the reactive snippet RC e to create a class component
I will get rid of the named export and include the component in AB component again make sure you import the component at the top in the class click component JSX I will simply add a button with the text clicked me if we take a look at the browser you
Should be able to see the button now adding a click event handler in a class component is very similar to functional component we have the on click attribute in camelcase of course and this is going to be equal to curly braces and within the curly braces the handler but in a
Class component methods will be accessed using the disk keyword so this dot click handler now we can define the method in the class so right above the render method click handler and we simply log to the console click the button again make sure you don’t add parentheses to the handler if you now
Save the file and take a look at the browser when I click on the click Me button you should see the message click the button in the console so that is basically how you handle events in a functional component and a class component camelcase for the event and specify a function or
A method within curly braces event handling looks pretty simple right now because we are not doing much in our event handler but generally your event handlers tend to modify the state of the component using this dot set state method and when you try to do that you
Kind of run into a whole world of confusion all that confusion revolves around this keyword binding in JavaScript so let’s take a detailed look at binding event handlers in the next video thank you guys for watching don’t first one
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
@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
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!
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
3:50 if we have to put parameter on button what should we do?we can't use () at onClick right?
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 ?
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. :/
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?
♥️♥️♥️♥️
3:33 event Handler function without parenthesis
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