I have a button in a React table which gets disabled based on the value in an adjacent column. For example, if the value in the adjacent column is Claimed, then the button gets disabled, however if it has the value Failed or is blank, the button can be clicked. Right now, Im able to disable button..however the color of the button isnt changing. Im using Material UI React ponents for the button. How to change the colour of the button when its disabled?

The code is as shown below:

    <FlatButton
          label="CLAIM"
          disabled={
                  item.status === "Claimed" ||
                  item.status === "Progress" ||
                  item.status === "Resolved"
                }
          onClick={//Some action here}
          labelStyle= {
          {
            color: '#FFFFFF',
            fontWeight: 600,
            fontSize: 11,
          }}
          style= {
          {
            borderRadius: '2px',
            width: '60px',
            border: 'solid 1px #d8dde3',
            backgroundColor: '#00bfa5',
          }}

I have a button in a React table which gets disabled based on the value in an adjacent column. For example, if the value in the adjacent column is Claimed, then the button gets disabled, however if it has the value Failed or is blank, the button can be clicked. Right now, Im able to disable button..however the color of the button isnt changing. Im using Material UI React ponents for the button. How to change the colour of the button when its disabled?

The code is as shown below:

    <FlatButton
          label="CLAIM"
          disabled={
                  item.status === "Claimed" ||
                  item.status === "Progress" ||
                  item.status === "Resolved"
                }
          onClick={//Some action here}
          labelStyle= {
          {
            color: '#FFFFFF',
            fontWeight: 600,
            fontSize: 11,
          }}
          style= {
          {
            borderRadius: '2px',
            width: '60px',
            border: 'solid 1px #d8dde3',
            backgroundColor: '#00bfa5',
          }}

• javascript
• reactjs
• button
• material-ui

1 Answer 1

You could do something like this :

 const disabled = item.status === "Claimed" ||
                  item.status === "Progress" ||
                  item.status === "Resolved";

       <FlatButton
          label="CLAIM"
          disabled={disabled}
          onClick={//Some action here}
          labelStyle= {
          {
            color: '#FFFFFF',
            fontWeight: 600,
            fontSize: 11,
          }}
          style= {
          {
            borderRadius: '2px',
            width: '60px',
            border: 'solid 1px #d8dde3',
            backgroundColor: disabled ? DISABLED_COLOR' : '#00bfa5',
          }} />