Categories
React Answers

How to prevent multiple times button press with React?

Spread the love

Sometimes, we want to prevent multiple times button press with React.

In this article, we’ll look at how to prevent multiple times button press with React.

How to prevent multiple times button press with React?

To prevent multiple times button press with React, we can set the disabled prop of the button.

For instance, we write

import React, { useState } from "react";

const Button = () => {
  const [double, setDouble] = useState(false);
  return (
    <button
      disabled={double}
      onClick={() => {
        // ...
        setDouble(true);
      }}
    />
  );
};

export default Button;

to set disabled to the double state.

And we call setDouble with true to set double to true after the first click.

Conclusion

To prevent multiple times button press with React, we can set the disabled prop of the button.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *