title: reactjs enable disable button through a function not working
body: <p>In ReactJS,  I want to enable/disable a button dynamically.
  For that, I created a function to check the form field from state.
  But it's not working.</p>
  
  <p>I tried the below code </p>
  
  <pre><code>render() {
  
  
      const canSave = true;  // Working
  
      // Not working
      const canSave = () =&gt; {
          const { paramCode, paramDesc, paramValue } = this.state.row;
          if (this.state.row &amp;&amp; paramCode &amp;&amp; paramDesc &amp;&amp; paramValue) {
              return true;
          }
          return false
      }
  
  
  
      /* For Create Dialog  */
      let createDialogFooter = &lt;div className="ui-dialog-buttonpane p-clearfix"&gt;
          &lt;Button label="Save"  disabled={canSave} /&gt;
      &lt;/div&gt;;
  </code></pre>
  
  <p><strong>Console Error:-</strong></p>
  
  <pre><code>    index.js:1375 Warning: Invalid value for prop `disabled` on &lt;button&gt; tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https : // fb.me/react-attribute-behavior
          in button (created by Button)
          in Button (at SearchPriceParameters.jsx:210)
          in div (at SearchPriceParameters.jsx:209)
          in div (created by Dialog)
          in div (created by Dialog)
          in Transition (created by CSSTransition)
          in CSSTransition (created by Dialog)
          in Dialog (at SearchPriceParameters.jsx:249)
          in div (at SearchPriceParameters.jsx:233)
          in SearchPriceParameters (created by Context.Consumer)
          in Route (at App.js:34)
          in Switch (at App.js:29)
          in div (created by Container)
          in Container (at App.js:28)
          in div (at App.js:27)
          in div (at App.js:16)
          in App (at src/index.js:15)
          in Router (created by BrowserRouter)
          in BrowserRouter (at src/index.js:14)
  </code></pre>
  
  <p><strong>Update:-</strong></p>
  
  <p>Thanks for the answers, now the below-fixed code works.</p>
  
  <pre><code>render() {
      /** Enable / disable button */
      const canSave = () =&gt; {
          if (this.state.row) {
              const { paramCode, paramDesc, paramValue } = this.state.row;
              return (paramCode &amp;&amp; paramDesc &amp;&amp; paramValue);
          }
          return false;
      }
  
  
      /* For Create Dialog  */
      let createDialogFooter = &lt;div className="ui-dialog-buttonpane p-clearfix"&gt;
          &lt;Button label="Save" icon="pi pi-check" onClick={this.save} className="p-button-warning" disabled={!canSave()} /&gt;
      &lt;/div&gt;;
  </code></pre>