In ReactJS, disabling a button is achieved by using the disabled attribute on the button element. The disabled attribute is a boolean attribute that when present on a button element, makes it unclickable and appears grayed out. Here's an example of how to disable a button in ReactJS:

There are a few ways in react that you can disable a button. Let us look at some of the ways.

Option 1. When input value is empty

• Set state in disable attribute

• Set state in the input value

• Once the input field has a value the button is enabled 

Here is an example below:

class Data extends Component {
    constructor(props) {
        super(props);
        this.state = {
            amount:"",
        };
    }

    render() {
 
        return (
            <div className="container">
                <div className="col-6 mx-auto"> 
                    <form>
                        <div className="mb-3">
                            <input type="text" className="form-control" value={this.state.amount} onChange={e => this.setState({amount:e.target.value})} required/>
                        </div>
                        <button className="btn btn-primary" disabled={!this.state.amount}>Enter</button>
                    </form>
                </div>
            </div>
        )
    }
}
export default Data;

In the above example, we first declare a state variable amount in the component class constructor. The initial value of is "", which means the button is initially disabled because the amount state is an empty string.

Next, we define a onChange attribute on the input field which is called when the user enters a value. Within this attribute, we use the setState method to update the state variable amount to not be empty, which enables the button.

Finally, we render the button element with the disabled attribute set to the amount state variable.

So, when a value is entered in the input field, the onChange attribute is called, which sets the amount state variable to true or not empty, making the button enabled and clickable.

Option 2. Place value directly in disable attribute

<button className="btn btn-primary" disabled={true}>Enter</button>

In the above example, we render the button element with the disabled attribute set to true.

Option 3. Use a conditional statement

• Set a state to the disable attribute

• Button will enabled or disabled based on value of state

class Data extends Component {
    constructor(props) {
        super(props);
        this.state = {
            amount:"",
            onSubmit:false
        };
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleSubmit (e) {
        e.preventDefault();
        this.setState({onSubmit:!this.state.onSubmit}); //button turns false on submit
    }

    render() {

        return (
            <div className="container">
                <div className="col-6 mx-auto">
                    <form onSubmit={this.handleSubmit}>
                        <div className="mb-3">
                            <input type="text" className="form-control" value={this.state.amount} onChange={e => this.setState({amount:e.target.value})} required/>
                        </div>
                        <button className="btn btn-primary" disabled={this.state.onSubmit}>Enter</button>
                    </form>
                </div>
            </div>
        )
    }
}
export default Data;

The example above is similar to the first example, the difference is that the button is enabled initially and only after the button is clicked to submit data the button is diabled.

An additional state variable onSubmit is set in the component class constructor. The initial value of is false, this state is set as the value for the disabled attribute which means the button is initially enabled.

Finally, we define a handleSubmit method which is called on button click. Within the method the onSubmit state variable is placed within a setState method which updates the state from false to true which in turn disables the button.