How To Prevent Multiple Button Clicks In React

In this article, we are talk about how to prevent multiple Button clicks in React. Let’s see the methods we introduce through the content below.

Prevent multiple Button clicks in React

To prevent multiple Button clicks in React, we recommend you the following 2 ways:

Use the currentTarget event property

The currentTarget property tells us which element the event was attached to or the element whose ‘eventListener‘ triggered the event. Generally, its task is to listen to the event.

To illustrate, take a look at this example:

import './App.css'

const App = () => {

  const handleClickButton1 = event => {
    console.log('button1');
  };
  
  //disable the second button
  const handleClickButton2 = event => {
    event.currentTarget.disabled = true;
    console.log('button2');
  };

  return (
    <div className='container'>
      <h2>Normal button</h2>
      <button className='btn btn-primary' onClick={handleClickButton1}>
        Click
      </button>

      <h2>Once clicked button</h2>
      <button className='btn btn-success' onClick={handleClickButton2}>
        Click
      </button>
    </div>
  );
};

export default App;

Output:

In this example, a button element is created with the ‘onClick‘ prop. Every time this button is pressed, the function handleClick() will be called. 

Inside handleClick(), the property ‘currentTarget‘ is used on the event to refer to our button element. This function will help you set the value for attribute ‘disabled‘ to ‘true’.

When an element is disabled, we will no longer be able to work with it. Like what you see in this example.

Use the ref attribute on the HTML element

You can also use the ref attribute on the HTML element to prevent multiple button clicks in React.

React refs provide us with how we can refer to an element in the DOM or from a child component class to the parent component. This allows us to read and edit those elements.

Here is an example for you:

import {useRef} from 'react';
import './App.css'

const App = () => {
  const reference = useRef(null);

  const handleClickButton1 = event => {
    console.log('button1');
  };

  //disable the second button
  const handleClickButton2 = event => {
    reference.current.disabled = true;
    console.log('button2');
  };

 return (
    <div className='container'>
      <h2>Normal button</h2>
      <button className='btn btn-primary' ref={buttonRef} onClick={handleClickButton1}>
        Click
      </button>

      <h2>Once clicked button</h2>
      <button className='btn btn-success' ref={buttonRef} onClick={handleClickButton2}>
        Click
      </button>
    </div>
  );
};

export default App;

Output:

Just like the first method, we also first create a button to catch the user’s click event.

With this approach, we must access the current property on the ref object to access the button element that we put the ref attribute on.

We can then refer to the button element and directly set the value ‘true‘ to its disabled attribute.

Summary

In conclusion, we have introduced you to the methods to prevent multiple Button clicks in React. Try practicing the methods above to get the results you want. Thank you for your attention.

Maybe you are interested:

• How to set the z-index attribute in React
• Add a class to the Body element in React
• Open page in new tab on button click in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js