How to disable button in React.js

Question

I have this component:

import React from 'react';

export default class AddItem extends React.Component {

add() {
    this.props.onButtonClick(this.input.value);
    this.input.value = '';
}


render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

}

I want the button to be disabled when input value is empty. But the code above doesn't work. It says:

add-item.component.js:78 Uncaught TypeError: Cannot read property 'value' of undefined

pointing to disabled={!this.input.value}. What can I be doing wrong here? I'm guessing that perhaps ref isn't created yet when render method is executed. If, so what is the workararound?

Additionally, for the disabled, you can add pointer-events: none; and it should do the trick. — Egel
– Egel, Commented Jan 2 at 16:16

Fabian Schultz · Accepted Answer · 2017-05-24 11:37:06Z

224

Using refs is not best practice because it reads the DOM directly, it's better to use React's state instead. Also, your button doesn't change because the component is not re-rendered and stays in its initial state.

You can use setState together with an onChange event listener to render the component again every time the input field changes:

// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />

// Button is disabled when input state is empty.
<button disabled={!this.state.value} />

Here's a working example:

class AddItem extends React.Component {
  constructor() {
    super();
    this.state = { value: '' };
    this.onChange = this.onChange.bind(this);
    this.add = this.add.bind(this);
  }

  add() {
    this.props.onButtonClick(this.state.value);
    this.setState({ value: '' });
  }

  onChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <div className="add-item">
        <input
          type="text"
          className="add-item__input"
          value={this.state.value}
          onChange={this.onChange}
          placeholder={this.props.placeholder}
        />
        <button
          disabled={!this.state.value}
          className="add-item__button"
          onClick={this.add}
        >
          Add
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <AddItem placeholder="Value" onButtonClick={v => console.log(v)} />,
  document.getElementById('View')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

edited May 24, 2017 at 11:37

answered Jan 5, 2017 at 15:40

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Michael Giovanni Pumo Over a year ago

This is the correct answer! Internal state should be used to update on change of the input and the button should simply check against this. +1

Dynamic Over a year ago

this.state has a limitation that it renders the UI again so if you're typing in a text box in a child component and have bound to the onChange event, it loses focus from the textbox. If it's in the same component it's fine but when used in a child component it loses focus.

Fabian Schultz Over a year ago

@Dynamic That should not happen. Do you have a working example of that?

Fabian Schultz Over a year ago

@Adrianopolis React removes the disabled attribute from the DOM if it's set to false—this is cross-browser friendly.

Fabian Schultz Over a year ago

@Adrianopolis I don't know what to tell you. Check out the actual, running demo code with your inspector. React is removing the disabled attribute. This is JSX, not HTML. No issue here.

|

Htet Oo Wai Yan · Accepted Answer · 2022-09-23 13:11:34Z

30

In HTML,

<button disabled/>
<button disabled="true">
<button disabled="false">
<button disabled="21">

All of them boils down to disabled="true" that is because it returns true for a non-empty string. Hence, in order to return false, pass a empty string in a conditional statement like this.input.value ? "true" : "".

render() {
    return (
        <div className="add-item">
            <input
                type="text"
                className="add-item__input"
                ref={(input) => this.input = input}
                placeholder={this.props.placeholder}
            />
            <button 
                disabled={this.input.value ? "true" : ""}
                className="add-item__button"
                onClick={this.add.bind(this)}
            >
                Add
            </button>
        </div>
    );
}

edited Sep 23, 2022 at 13:11

Htet Oo Wai Yan

1333 silver badges13 bronze badges

answered Feb 18, 2020 at 6:42

Varnika Chaturvedi

3173 silver badges2 bronze badges

3 Comments

Pang Over a year ago

Is buttton misspelt here?

Arne Brasseur Over a year ago

React is different from standard DOM, the disabled property takes an actual boolean in React, so disabled={true} or disabled={false}.

ShaileshDev Over a year ago

Strings are not accepted for disabled property. Update- disabled={this.input.value ? true : false}

NanoCat · Accepted Answer · 2021-06-14 03:11:36Z

13

Here is a functional component variety using react hooks.

The example code I provided should be generic enough for modification with the specific use-case or for anyone searching "How to disable a button in React" who landed here.

import React, { useState } from "react";

const YourComponent = () => {
  const [isDisabled, setDisabled] = useState(false);
  
  const handleSubmit = () => {
    console.log('Your button was clicked and is now disabled');
    setDisabled(true);
  }

  return (
      <button type="button" onClick={handleSubmit} disabled={isDisabled}>
        Submit
      </button>
  );
}

export default YourComponent;

answered Jun 14, 2021 at 3:11

NanoCat

6198 silver badges12 bronze badges

Comments

prosti · Accepted Answer · 2017-02-01 06:58:20Z

There are few typical methods how we control components render in React.

But, I haven't used any of these in here, I just used the ref's to namespace underlying children to the component.

class AddItem extends React.Component {
    change(e) {
      if ("" != e.target.value) {
        this.button.disabled = false;
      } else {
        this.button.disabled = true;
      }
    }

    add(e) {
      console.log(this.input.value);
      this.input.value = '';
      this.button.disabled = true;
    }

    render() {
        return (
          <div className="add-item">
          <input type="text" className = "add-item__input" ref = {(input) => this.input=input} onChange = {this.change.bind(this)} />
          
          <button className="add-item__button" 
          onClick= {this.add.bind(this)} 
          ref={(button) => this.button=button}>Add
          </button>
          </div>
        );
    }
}

ReactDOM.render(<AddItem / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

T Mitchell · Accepted Answer · 2017-01-05 15:36:14Z

6

You shouldn't be setting the value of the input through refs.

Take a look at the documentation for controlled form components here - https://facebook.github.io/react/docs/forms.html#controlled-components

In a nutshell

<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />

Then you will be able to control the disabled state by using disabled={!this.state.value}

answered Jan 5, 2017 at 15:36

T Mitchell

1,0177 silver badges12 bronze badges

Comments

Nabeel Hussain Shah · Accepted Answer · 2020-09-26 22:47:02Z

6

very simple solution for this is by using useRef hook

const buttonRef = useRef();

const disableButton = () =>{
  buttonRef.current.disabled = true; // this disables the button
 }

<button
className="btn btn-primary mt-2"
ref={buttonRef}
onClick={disableButton}
>
    Add
</button>

Similarly you can enable the button by using buttonRef.current.disabled = false

answered Sep 26, 2020 at 22:47

Nabeel Hussain Shah

8842 gold badges11 silver badges15 bronze badges

Comments

damd · Accepted Answer · 2017-01-05 15:40:20Z

2

this.input is undefined until the ref callback is called. Try setting this.input to some initial value in your constructor.

From the React docs on refs, emphasis mine:

the callback will be executed immediately after the component is mounted or unmounted

answered Jan 5, 2017 at 15:40

damd

7,13710 gold badges55 silver badges80 bronze badges

Comments

Agnibha Chatterjee · Accepted Answer · 2023-01-01 12:50:14Z

1

I have had a similar problem, turns out we don't need hooks to do these, we can make an conditional render and it will still work fine.

<Button
    type="submit"
    disabled={
        name === "" || email === "" || password === "" 
    }
    fullWidth
    variant="contained"
    color="primary"
    className={classes.submit}>
    SignUP
</Button>

edited Jan 1, 2023 at 12:50

answered Jul 5, 2020 at 18:31

Agnibha Chatterjee

614 bronze badges

2 Comments

Simba Over a year ago

Cool solution, I did the same

Emile Bergeron Over a year ago

? true : false is unnecessary since === already returns a boolean value.

Collectives™ on Stack Overflow

How to disable button in React.js

8 Answers 8

8 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

8 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related