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            lt div className  add-item  gt               lt input type  text  className  add-item  input  ref   input    gt  this input   input  placeholder  this props placeholder    gt               lt button disabled   this input value  className  add-item  button  onClick  this add bind this   gt Add lt  button gt           lt  div gt                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

User · Accepted Answer

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   lt input onChange  e   gt  this setState   value  e target value     value  this state value    gt      Button is disabled when input state is empty   lt button disabled   this state value    gt    Here s a working example    x000D   x000D  class AddItem extends React Component   x000D    constructor     x000D      super    x000D      this state     value        x000D      this onChange   this onChange bind this   x000D      this add   this add bind this   x000D      x000D   x000D    add     x000D      this props onButtonClick this state value   x000D      this setState   value         x000D      x000D   x000D    onChange e    x000D      this setState   value  e target value     x000D      x000D   x000D    render     x000D      return   x000D         lt div className  add-item  gt  x000D           lt input x000D            type  text  x000D            className  add-item  input  x000D            value  this state value  x000D            onChange  this onChange  x000D            placeholder  this props placeholder  x000D            gt  x000D           lt button x000D            disabled   this state value  x000D            className  add-item  button  x000D            onClick  this add  x000D           gt  x000D            Add x000D           lt  button gt  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render  x000D     lt AddItem placeholder  Value  onButtonClick  v   gt  console log v     gt   x000D    document getElementById  View   x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  View  gt  lt  div gt  x000D   x000D   x000D

User · Answer

just Add   lt button disabled  this input value  quot true quot   quot  quot   className  quot add-item  button quot  onClick  this add bind this   gt Add lt  button gt

User · Answer

In HTML     lt button disabled  gt   lt buttton disabled  true  gt   lt buttton disabled  false  gt   lt buttton disabled  21  gt    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            lt div className  add-item  gt               lt input type  text  className  add-item  input  ref   input    gt  this input   input  placeholder  this props placeholder    gt               lt button disabled  this input value  true      className  add-item  button  onClick  this add bind this   gt Add lt  button gt           lt  div gt

User · Answer

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   lt input value  this state value  onChange   e    gt  this setState  value  e target value      gt    Then you will be able to control the disabled state by using disabled   this state value

User · Answer

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    x000D   x000D  class AddItem extends React Component   x000D      change e    x000D        if        e target value    x000D          this button disabled   false  x000D          else   x000D          this button disabled   true  x000D          x000D        x000D   x000D      add e    x000D        console log this input value   x000D        this input value       x000D        this button disabled   true  x000D        x000D   x000D      render     x000D          return   x000D             lt div className  add-item  gt  x000D             lt input type  text  className    add-item  input  ref     input    gt  this input input  onChange    this change bind this     gt  x000D             x000D             lt button className  add-item  button   x000D            onClick   this add bind this    x000D            ref   button    gt  this button button  gt Add x000D             lt  button gt  x000D             lt  div gt  x000D             x000D        x000D    x000D   x000D  ReactDOM render  lt AddItem    gt    document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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   lt Button     type  quot submit quot      disabled           name      quot  quot     email      quot  quot     password      quot  quot    true   false           fullWidth     variant  quot contained quot      color  quot primary quot      className  classes submit  gt      SignUP  lt  Button gt

User · Answer

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

User · Answer

very simple solution for this is by using useRef hook const buttonRef   useRef     const disableButton        gt     buttonRef current disabled   true     this disables the button      lt button className  quot btn btn-primary mt-2 quot  ref  buttonRef  onClick  disableButton   gt      Add  lt  button gt   Similarly you can enable the button by using buttonRef current disabled   false

[javascript] How to disable button in React.js

Examples related to javascript

Examples related to reactjs