title: How can i dynamically disable a Fluent UI button?
body: <p>I am currently working with <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/button#overview" rel="nofollow noreferrer">Fluent UI buttons</a>.</p>
  <p>What i need to do is to dynamically switch between the normal and disabled state of a button according to a <code>disabled</code> flag. I tried to do the following:</p>
  <pre><code>import { PrimaryButton as FluentUIButton } from 'office-ui-fabric-react';
  
  export class App extends React.Component {
  
    disabled: boolean = false;
  
    render() {  
      return (
         &lt;FluentUIButton text={&quot;Click me!&quot;} disabled={this.disabled} /&gt;
      );
    }
  
    invert() {
      setTimeout( () =&gt; {
        this.disabled = !this.disabled;
        this.invert();
      }, 2000)
    }
  
    componentWillMount() {
      this.invert();
    }
  
  }
  </code></pre>
  <p>However the change of <code>disabled</code> seems to have no effect and the button does not react to che change.</p>
  <p>How can i make the button dynamically change when <code>disabled</code> changes?</p>