How to disable button in React with example


This article covers an how to enable disable button in reactjs application

This article cover the following examples

  • Enable/disable button when 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 button when 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 name from user
  • Submit button to submit the form data
  • In react component, Initialized with name to default value in State object
  • Input text added event handler - handleChange event which will be executed when user enters the form data.
  • In handleChange event, update the user entered data into state object
  • input and submit fields are wrapped inside a form.

Here is an example form input button with 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.

Button element has disabled attribute. disabled=true makes button is disabled, disabled=false for button is enabled

How to enable/disable 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 button with functional component in React

We discussed how state is managed in class components,

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

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

Here is an 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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.