title: React Materials-UI disable a button in a handler
body: <p>Trying to disable a button after the user clicks on it, but from a handler function.</p>
  <p>I have referenced these two similar questions:
  <a href="https://stackoverflow.com/questions/55586626/react-material-ui-how-to-give-a-button-a-custom-color-when-disabled/56520516">React Material UI: How to give a button a custom color when disabled?</a>
  <a href="https://stackoverflow.com/questions/56637567/change-disable-attribute-in-react-select-with-material-ui">Change disable attribute in react select with material UI</a></p>
  <p>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).</p>
  <p>My original blue button:</p>
  <pre><code> &lt;Button id='UploadButton' onClick={uploadButtonClicked} 
           variant=&quot;contained&quot; color=&quot;primary&quot;&gt;Upload&lt;/Button&gt;
  </code></pre>
  <p>My revised button (trying to use state for color):</p>
  <pre><code> &lt;Button id='UploadButton' onClick={uploadButtonClicked} 
           disabled=&quot;{uploadButtonDisabled}&quot; 
           variant=&quot;contained&quot; 
           color=&quot;{uploadButtonColor}&quot;&gt;Upload&lt;/Button&gt;
  </code></pre>
  <p>My state &amp; handler:</p>
  <pre><code>       const [uploadButtonColor, setUploadButtonColor] =
  React.useState('primary');   
         const [uploadButtonDisabled,
  setUploadButtonDisabled] = React.useState('false');
        
         const uploadButtonClicked = () =&gt; {
            // will post data to a REST API here, then disable the button 
            setUploadButtonColor('red')
            setUploadButtonDisabled('true')
        }
  </code></pre>
  <p>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?</p>
  <p>This is how <a href="https://material-ui.com/components/buttons/" rel="nofollow noreferrer">the doc</a> shows a disabled button:</p>
  <pre><code>&lt;Button variant=&quot;outlined&quot; disabled&gt;
      Upload 
  &lt;/Button&gt;
  </code></pre>