How to disable button in React with example

This article covers how to enable disable button in the reactjs application.

This article covers the following examples.

• Enable/disable the button when the input form is empty with stateful(class component)
• Disable the button based on react component state
• disable reset button with functional(stateless) component

#How to Enable/disable the button when the input form is empty using class components

In standard form handling, the form includes various input buttons for reading data from the user, as well as a, submit button for submitting the form data.

When the form is empty, we’d like to have an input form validation that disables the button. The button should be enabled when the user fills out the form info.

In the below react component,

• there is an input form for taking the name of a user
• Submit button to submit the form data
• In react component, Initialized with a name to the default value in the State object
• Input text added event handler - handleChange event which will be executed when the user enters the form data.
• In the handleChange event, update the user entered data into a state object
• input and submit fields are wrapped inside a form.

Here is an example input form button with an example

import React, { Component } from "react";

class DisableButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
    };
  }

  handleChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <form>
        <input type="text" onChange={this.handleChange} />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default DisableButton;

The enable/disable button in the above code is not validated. Even if the user does not enter any details, the button remains enabled.

The button element has a disabled attribute. disabled=true makes the button is disabled, disabled=false for the button is enabled

How to enable/disable the button

import React, { Component } from "react";

class DisableButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
    };
  }

  handleChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <form>
        <input type="text" onChange={this.handleChange} />

        <input type="submit" value="Submit" disabled={!this.state.name} />
      </form>
    );
  }
}

export default DisableButton;

#How to disable a button with a functional component in React

We discussed how the state is managed in class components,

This is an example of stateless components also called functional components.

In the below example, Used the useState react hook to store the button disable status in react state.

Here is a complete example

import React, { useState } from "react";
export default function ResetButton() {
  const [disable, setDisable] = useState(true);

  function handleChange(event) {
    setDisable(event.target.value === "");
  }

  return (
    <form>
      <div>
        Password: <input onChange={handleChange} /> <br />
        <button disabled={disable}>Reset</button>
      </div>
    </form>
  );
}

#Conclusion

To sump up, We have learned button disable when form input is empty.