OnClick Events Handling in Reactjs

In this article, we learn how handling events works in reactjs.

Reactjs onClick Event Handler: What Is It?

The onClick event handler is used whenever you need to do action after clicking a button, link, or pretty much any other element.

The onClick event handler is one of the most effective and often utilized React utilities as a result.

Let’s have a look at a few React onClick event handler usage examples.

Example: After clicking a button, call a function

import React from 'react';

function App() {

  function sayHello() {
    alert('Hello Rohit!');
  }
  
  return (
    <button onClick={sayHello}>
      Click me!
    </button>
  );
}

export default App;

Output

After clicking on the button

The basic App component shown above comprises a single button and the function sayHello().

Our sayHello() code is referenced by the onClick event handler that is associated with the button inside the React component. Every time you press the button, the function will be activated.

What is the sayHello() function called? After the event handler, you can call a function by supplying its name between curly braces:

<button onClick={sayHello}>Click me!</button>

Common Errors

Keep in mind that we just provide the function’s name to the event handler, not the name enclosed in parentheses. Functions are called when a function name is enclosed in parentheses.

In other words, if the function was given in between parentheses, it would run each time the component was rendered. A function call inside the event handler is not something we want to do.

Wrong

<button onClick={sayHello()}>
      Click me!
    </button>

Right

<button onClick={sayHello}>
      Click me!
    </button>

In an onClick Event Handler, call an Inline Function

A function that is defined inside the onClick handler when the React Component renders is known as an inline function.

It is created during render because the function declaration is contained within the component render method’s onClick handler (or return, in the case of functional React components).

To add extra parameters to a function, such as a value from a loop or the value of the target button, you would use an inline function. Let’s look at an illustration:

import React from 'react';

function App() {
  return (
    <button onClick={() => alert('Hello Rohit!')}>
      Click me!
    </button>
  );
}
¬¬¬
export default App;

Output

After clicking on the button

Multiple Functions Can Be Called in an On-Click Event Handler

After pressing a button, you might find yourself wishing to call several multiple functions. Changing the state of a component while also displaying an alert, for instance.

There are multiple methods for doing this:
A) Executing some code within the onClick handler
B) Multiple functions are called within the onClick handler

Starting inside the onClick handler itself, let’s define a block of code:

import React from 'react';

function App() {
  return (
   <button onClick={() => {
      const name = 'Rohit!';
      alert('Hello, ', name);
    }}>
      Click me!
    </button>
  );
}

export default App;

Output

After clicking on the button

It is possible to define a block of code inside the onClick handler, as the above example demonstrates. However, the block scope may be challenging to interpret depending on how much code you intend to execute.

Similar to this, it is also feasible to invoke multiple functions inside the onClick handler:

import React from 'react';

function App() {
  return (
   <button onClick={() => {
      this.sayHello();
      this.setState({ name: "Rohit!"});
    }}>
      Click me!
    </button>
  );
}

export default App;

Output

After clicking on the button

Again, if we simply called the sayHello method and set the state inside that, the code above would be more readable. However, there can be times when you have to take the above steps.

Conclusion

This article will help you to learn about handling events in react. Thank you for reading the article. Hope you understand very well the concept of the onClick handling events.