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.
1 2 3 4 5 6 7 8 9 10 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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> ); } |