React Materials-UI disable a button in a handler

Question

Trying to disable a button after the user clicks on it, but from a handler function.

I have referenced these two similar questions: React Material UI: How to give a button a custom color when disabled? Change disable attribute in react select with material UI

I thought changing the color would be a good practice step, but that didn't work. When I use color='primary' the button is blue, and that's what I want for the initial state. However, when the page loads, the button is now gray (looks disabled, but the mouse can still click on it).

My original blue button:

 <Button id='UploadButton' onClick={uploadButtonClicked} 
         variant="contained" color="primary">Upload</Button>

My revised button (trying to use state for color):

 <Button id='UploadButton' onClick={uploadButtonClicked} 
         disabled="{uploadButtonDisabled}" 
         variant="contained" 
         color="{uploadButtonColor}">Upload</Button>

My state & handler:

       const [uploadButtonColor, setUploadButtonColor] =
React.useState('primary');   
       const [uploadButtonDisabled,
setUploadButtonDisabled] = React.useState('false');
      
       const uploadButtonClicked = () => {
          // will post data to a REST API here, then disable the button 
          setUploadButtonColor('red')
          setUploadButtonDisabled('true')
      }

Do I need to use color schema to make it look disabled, or can I just add the disabled word, or set disabled to true?

This is how the doc shows a disabled button:

<Button variant="outlined" disabled>
    Upload 
</Button>

Answer 1

Do not put quotes around the property/substitution values disabled={isDisabled} not disabled='{isDisabled}' (and same with color).

You can use this :

import Button from "@material-ui/core/Button";

function SampleButtons(props) {
  let [isDisabled, setIsDisabled] = React.useState(false)
  return (
    <React.Fragment>
      <Button variant="contained" onClick={() => setIsDisabled(true)} disabled={isDisabled}>Button</Button>
    </React.Fragment>
  );
}