How to add onClick Event in react.js?

Creating interactive user interfaces in React and managing click events effectively is key to this process.

Whether building a simple UI or an advanced application, understanding how to properly utilize the onClick attribute is essential.

I guide will walk you through the basics of adding onClick events in React for functional and class-based components, explain what events and event handlers are.

Adding onClick in Functional Components

In functional components, the onClick attribute is essential for defining how elements respond to user interactions. Here’s a detailed look at implementing onClick in a functional setting:

import React from 'react';

function ClickExample() {
  const handleClick = () => {
    alert('Button was clicked');
  };

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

export default ClickExample;

In this example, ‘handleClick’ is the function that will be called when the button is clicked and The ‘onClick’ attribute within the button element uses curly braces to reference the ‘handleClick’ function, ensuring that it gets called when the button is clicked.

Using Arrow function for the above example:

function ClickExample() {
  return (
    <button onClick={() => alert('Button was clicked')}>
      Click Me
    </button>
  );
}

Adding onClick in Class Components

import React, { Component } from 'react';

class ClickExample extends Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('Button was clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

export default ClickExample;

In this example, ‘handleClick’ is bound to the instance of the class in the constructor to ensure this refers to the component instance when the function is called. The onClick handler is set up similarly to the functional component but requires binding unless arrow functions are used.

Using Arrow Functions as Class Properties

Using Arrow function as Class Property requires class properties syntax support. This approach can simplify your code by avoiding the need to bind this in the constructor.

class ClickExample extends Component {
  handleClick = () => {
  alert('Button was clicked');
 };
 render() {
  return (
   <button onClick={this.handleClick}>
     Click Me
   </button>
  );
 }
}

What are Events?

Events are referred to the actions that can be triggered by a user or by the system. Whenever there is a user interaction or any other change occurs on the webpage and we want there to be a reaction to that change we can use events.

Clicking a button, submitting a form, changing input fields, pressing a key, or resizing a window are some examples of common user or system actions that generate events to which your application can respond to.

What are Event Handlers?

Event handlers are JavaScript functions that are triggered in response to specific events, such as clicking a button or entering data into a form. Event handlers determine what action will occur whenever an event is fired. In React, event handlers are passed as props to components, typically using camelCase naming conventions like onClick, onSubmit, onChange, etc.

Event handlers can perform a variety of tasks, such as updating the state, calling other functions, interacting with APIs, or conditionally rendering UI elements based on user actions. The ability to handle events is integral to making React components interactive.

Handling prevalent challenges faced while using the onClick in React?

As a developer working with onClick events and handlers, you may encounter a variety of common issues. Understanding these problems and knowing how to effectively address them can significantly improve the functionality and user experience of your applications.

Let’s iterate through some of them:

1. Binding Issues in Class Components

In class components, this keyword inside an event handler does not automatically bind to the instance of the class. This can lead to unexpected behaviours when accessing properties or methods of the class.

There are several ways to handle this binding in class components:

• Bind in Constructor: The most common and performative way is to bind the event handler in the constructor.

constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
}

• Class Properties as Arrow Functions: Using arrow functions for class properties automatically binds this to the class instance.

handleClick = () => {
 console.log(this.props);
}

• Inline Arrow Function in JSX: Though not recommended for performance reasons, this approach can be used for occasional event handlers that don’t trigger re-renders often.

<button onClick={() => this.handleClick()}>
 Click me
</button>

2. Performance Issues with Inline Functions

Defining functions inline within the onClick handler can lead to performance issues because these functions are re-created on every render.

• Define Outside JSX: Move the function definition outside the JSX or use class methods as event handlers to avoid unnecessary re-creations of functions.
• Memoization: For functional components, useCallback hook can be used to memoize handlers, especially if they are passed down to child components.

const handleClick = useCallback(() => {
 console.log('Clicked!');
}, []);

3. Event Pooling in React

React uses a synthetic event pooling mechanism to boost performance. This means that the event object in an event handler is pooled and all its properties are nullified after the event callback is invoked. Accessing the event asynchronously can lead to errors because the event properties may no longer be available.

• Persist the Event: If you need to access the event in an asynchronous manner, call event.persist() to remove the event from the pool.

const handleClick = event => {
  event.persist();
  setTimeout(() => {
  console.log(event.target);  // Access event safely
 }, 1000);
};

• Copy Needed Properties: Another approach is to extract the necessary properties from the event object immediately within the handler.

const handleClick = event => {
  const { target } = event;
  setTimeout(() => {
  console.log(target);  // Access copied value safely
 }, 1000);
};

4. Unexpected Behaviour with Conditional Rendering

onClick handlers might not behave as expected when used with elements that are conditionally rendered, especially if the conditions change rapidly in response to the clicks.

• Stable Event Context: Ensure that the state or props that trigger the conditional rendering are stable and changes are handled smoothly. Use state setters or lifecycle methods/hooks to control updates properly.

5. Accessibility and HTML Structure

Sometimes, developers attach onClick events to non-interactive elements like <div> or <span>, which can lead to poor accessibility.

• Use Semantic HTML: Always use <button> or <a> tags for clickable elements, or ensure that non-interactive elements with click handlers are accessible with proper roles and tab indices.

<div role="button" tabIndex={0} onClick={handleClick}>
 Clickable Div
</div>

Understanding and addressing these common issues with onClick events and handlers can lead to more robust, efficient, and accessible React applications.