Any web application you create typically tends to have user interaction, when the user interacts with your application, events are fired. We are going to see how events handling in react js in both functional and class components with examples.

For instance, mouse clicks, mouse over, keypress, change event, and so on.  the application must handle such events and execute the necessary code.

In this article, 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.  

events handling in reactjs


Events Handling in Functional Components

Let's begin with functional components. I'm going to create a new file called FunctionClick.js, within the file, I am going to create a new functional component, as part of the HTML or JSX I will add a button that says click.

FunctionClick.js

import React from 'react'

function FunctionClick() {
  return (
    <div>
      <button>Click</button>

    </div>
  )
}

export default FunctionClick

Next, let me add the component in the app component so within the return statement FunctionClick, make sure to import it as well.

App.js

import FunctionClick from './components/FunctionClick'

function App() {
  return (
    <div>
      <FunctionClick />
    </div>
  );
}

export default App;


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.

1. 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 onclick but in react, it has to be camel-cased, so C has to be uppercase, onClick 

2. 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 click handler within curly braces. Now let's define the clickHandler 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 clickHandler, so function clickHandler and within the body, we simply log to the console button clicked.

FunctionClick.js

import React from 'react'

function FunctionClick() {
  function clickHandler() {
    console.log('Button clicked')
  }
  return (
    <div>
      <button onClick={clickHandler}>Click</button>

    </div>
  )
}

export default FunctionClick

Let's save this and test it out,  if you open the developer tools and the console tab and click on the button,  you should see the message button clicked in the console.  Our 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 onClick 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.

import React from 'react'

function FunctionClick() {
  function clickHandler() {
    console.log('Button clicked')
  }
  return (
    <div>
      <button onClick={clickHandler()}>Click</button>

    </div>
  )
}

export default FunctionClick

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 the class components. when your clickHandler changes the state of the component, the component constantly re-renders 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.


Events Handling in Class Components

Alright, let's take a look at event handling in the class components. I'm going to create a new file called ClassClick.js and within the file, I'm going to create a class component and include the component in the App component, again make sure you import the component at the top. 

ClassClick.js

import React, { Component } from 'react'

class ClassClick extends Component {
  render() {
    return (
      <div>
        <button>Click me</button>

      </div>
    )
  }
}

export default ClassClick

App.js

import ClassClick from './components/ClassClick'

function App() {
  return (
    <div>
      <ClassClick />
    </div>
  );
}

export default App;

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 the functional component. We have the onClick 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 this keyword, so this.clickHandler 

Now, we can define the method in the class, so right above the render method clickHandler and we simply log to the console click the button, again make sure you don't add parentheses to the handler. 

import React, { Component } from 'react'

class ClassClick extends Component {
  clickHandler() {
    console.log('clicked the button')
  }
  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Click me</button>

      </div>
    )
  }
}

export default ClassClick

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.setState() 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 article.

Thank you for reading this article.  I'll see you guys in the next one.