How can i dynamically disable a Fluent UI button?

Question

I am currently working with Fluent UI buttons.

What i need to do is to dynamically switch between the normal and disabled state of a button according to a disabled flag. I tried to do the following:

import { PrimaryButton as FluentUIButton } from 'office-ui-fabric-react';

export class App extends React.Component {

  disabled: boolean = false;

  render() {  
    return (
       <FluentUIButton text={"Click me!"} disabled={this.disabled} />
    );
  }

  invert() {
    setTimeout( () => {
      this.disabled = !this.disabled;
      this.invert();
    }, 2000)
  }

  componentWillMount() {
    this.invert();
  }

}

However the change of disabled seems to have no effect and the button does not react to che change.

How can i make the button dynamically change when disabled changes?

score 1 · Accepted Answer · answered Jun 26 '20 at 08:59

import { PrimaryButton as FluentUIButton } from 'office-ui-fabric-react';

export class App extends React.Component {

  this.state = {disabled:false};

  render() {  
    return (
       <FluentUIButton text={"Click me!"} disabled={this.state.disabled} />
    );
  }

  invert() {
    setTimeout( () => {
      this.setState({disabled:true})
    }, 2000)
  }

  componentWillMount() {
    this.invert();
  }

}

You are not using any state variable using state variables and set state you can do that. https://reactjs.org/docs/state-and-lifecycle.html

How can i dynamically disable a Fluent UI button?

1 Answers1