How to disable a button in React

avatar

Borislav Hadzhiev

Last updated: Apr 30, 2022

banner

Photo from Unsplash

Disable a button in React #

Use the disabled prop to disable a button in React, e.g. <button disabled={true}>Click</button>. You can use the prop to conditionally disable the button based on the value of an input field or another variable or to prevent multiple clicks to the button.

App.js
import {useState} from 'react'; export default function App() { const [message, setMessage] = useState(''); const isAnonymous = true; const handleClick = event => { event.currentTarget.disabled = true; console.log('button clicked'); }; return ( <div> {/* ✅ disable button when input is empty */} <div> <input type="text" id="message" name="message" value={message} onChange={event => setMessage(event.target.value)} /> <button disabled={!message}>Click</button> </div> <hr /> {/* ✅ disable button */} <button disabled={true}>Click</button> <hr /> {/* ✅ disable button conditionally */} <button disabled={isAnonymous ? true : false}>Click</button> <hr /> {/* ✅ disable button after it has been clicked once */} <button onClick={handleClick}>Click</button> </div> ); }

react disable button

The first example shows how to disable a button when an input field is empty.

We used the useState hook to store the value of the input.

To disable a button in React, we have to set the disabled prop on the element.

App.js
<button disabled={!message}>Click</button>

The example above uses the logical NOT (!) operator to negate the value of the message variable.

In other words, if the message variable stores an empty string, which is a falsy value, we set the disabled prop to true and disable the button.

All other string values are truthy, so negating a truthy value sets the button's disabled prop to false.

You can also use conditionals to determine whether a button should be disabled.

App.js
<button disabled={isAnonymous ? true : false}>Click</button>

The example uses a ternary operator which is very similar to an if/else statement.

The expression before the question mark gets evaluated and if it returns a truthy value, the operator returns the value before the colon, otherwise it returns the value after the colon.

In other words, if the isAnonymous variable stores a truthy value, we return true and disable the button, otherwise we return false which leaves the button enabled.

The last example shows how to prevent multiple clicks on a button by disabling the button after the first click.

App.js
export default function App() { const handleClick = event => { event.currentTarget.disabled = true; console.log('button clicked'); }; return ( <div> {/* ✅ disable button after it has been clicked once */} <button onClick={handleClick}>Click</button> </div> ); }

react prevent multiple button clicks

We set an onClick prop on the button element. When the button gets clicked, the handleClick function is invoked.

We used the currentTarget property on the event to get a reference to the button and set its disabled attribute to true.

The currentTarget property on the event gives us access the element that the event listener is attached to.

Whereas the target property on the event gives us a reference to the element that triggered the event (could be a descendant).

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.