How to disable button in React js

January 10, 2023 XpertPhp

Hello guys, In this article, we will explain to you how to disable button in react js. so we will give you a simple example of React disable button after click.

sometimes, users click multiple times. it’s not a good job because it working in many times. so we need to prevent multiple clicks.

In this example, we use the useState hook to store the boolean value. when the user clicks on the button at that time we set the setDisable props value true. so that button will be disabled.

import {useState} from 'react';
export default function App() {

	const [disable, setDisable] = useState(false);
	
	return (
		<button disabled={disable} onClick={() => setDisable(true)}>Click me!</button>
	);

}

import {useState} from 'react';

export default function App() {

const [disable, setDisable] = useState(false);

return (

<button disabled={disable} onClick={() => setDisable(true)}>Click me!</button>

);

}

react class component disable button onclick

import React, { Component } from 'react';
	
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showButton: false
		};
		this.open = this.open.bind(this);
		this.clickMe = this.clickMe.bind(this);
	}

	clickMe() {
		this.setState({showModal: false});
	}
	render() {
		return (
			<button disabled={this.state.showButton} onClick={this.clickMe}>Click me!</button>
		);
	}	
}
export default App;

import React, { Component } from 'react';

class App extends Component {

constructor(props) {

super(props);

this.state = {

showButton: false

};

this.open = this.open.bind(this);

this.clickMe = this.clickMe.bind(this);

}

clickMe() {

this.setState({showModal: false});

}

render() {

return (

<button disabled={this.state.showButton} onClick={this.clickMe}>Click me!</button>

);

}

export default App;

react disable button for 5 seconds

import {useState, useEffect} from 'react';
export default function App() {

	const [disable, setDisable] = useState(false);
	
	useEffect(() => {
		setTimeout(function(){
		  setDisable(false);
		}, 5000);
	});
	
	return (
		<button disabled={disable} onClick={() => setDisable(true)}>Click me!</button>
	);

}

import {useState, useEffect} from 'react';

export default function App() {

const [disable, setDisable] = useState(false);

useEffect(() => {

setTimeout(function(){

setDisable(false);

}, 5000);

});

return (

<button disabled={disable} onClick={() => setDisable(true)}>Click me!</button>

);

}

Please follow and like us: