React onClick Event Handling with Examples

    May 21, 2020       by Suraj Roy
react-onclick-event-handler.jpg

In this article, We will try to understand the use of the onClick event handing in-depth for React. In any type of application, Event handlers enable the user to interact with the application using clicking, typing, scrolling the page, etc.

If you have an understanding of working with HTML & plain JavaScript, then you can easily play with event handings to React. In React, Events are declared in camelCase. For example, You have to perform any specific task on clicking on any HTML element then declare the onClick method to React.

HTML/CSS approach of onclick Event Handling Example

 

index.html

 
<button id="foobutton" onclick="showAlert()">
  Click Me
</button>
 

 

script.js

 
function showAlert() {
  alert('button is clicked.');
};
 

 

Basics of onClick Event Handling Example

In this example, we will see the very basic use of onClick event in the React application

 

 
import React from "react";
 
class App extends React.Component {
 
  showAlert() {
    alert("Button Clicked");
  }
 
  render() {
    return <button onClick={this.showAlert()}>Click Here</button>;
  }
}
 
export default App;
 

 

Handling Inline Function with React onClick Event Handler Example

In this example, We will write the function just after the onClick event, This type of approach can be used for very basic task, like showing alert, assigning value to a variable, etc.

 

 
import React from 'react';
 
class App extends React.Component {
  render() {
    return (
      <button onClick={() => alert('Hi! Admin')}>
        Click Here
      </button >
    );
  }
}
 
export default App;
 

 

Handling Multiple Function on same onClick Event Example

Sometimes we need to call two different functions to perform two different tasks on the same event. This can be easily handled with the below example:

 
import React from "react";
 
class App extends React.Component {
  showAlert() {
    alert("Hi! JSON World");
  }
 
  printInConsole() {
    console.log("Hello JSON World");
  }
 
  render() {
    return (
    <button
    onClick={() => {
    this.showAlert();
    this.printInConsole();
    }}>
      Click me!
    </button>
  );
}
}
 
export default App;
 

 

Additional Example

In this example, We will declare an array with name of countries and get the array items using map() and show the item using inline onClick event handler.

 

 
import React from 'react';
 
class App extends React.Component {
 
  countries = ['USA', 'Australia', 'Britain', 'India', 'Sri lanka'];
 
  showCountry(country) {
    alert(country)
  }
 
  render() {
    return (
    <ul>
      {this.countries.map((item) => (
        <li>
          <button onClick={() => this.showCountry(item)}>
            Click Here
          </button>
        </li>
      ))}
    </ul>
    );
  }
}
 
export default App;
 

 

Conclusion

In this article, We learn about the use of onClick event hander in-depth with Example in React

I hope this article helped you to get in depth knowledge about the topic. You can also find other demos/articles at React.js Sample Projects here to start working on enterprise-level applications.

Let me know your thoughts over email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thank You!

react onclick

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS