title: How to disabled button after some conditions is met?
body: <p>I have a button called Add Service that I would like to be inactive after a condition. The condition would be when the status of my request passed the &quot;Initial&quot; stage. After this initial stage, the add service button could no longer be available.</p>
  <p>This is the part of my code where I handle the status change:</p>
  <pre><code>&lt;GridForm&gt;
            &lt;MaterialSelect
              labelId=&quot;status&quot;
              name=&quot;status&quot;
              label=&quot;Status&quot;
              value={serviceFilter.status || ''}
              customOnChange={(e) =&gt; { onChangeStatus(e) }}
              formControlClassName={'fullRow'}
            &gt;
              &lt;MenuItem value={''}&gt;Select a Filter&lt;/MenuItem&gt;
              &lt;MenuItem value={'all'}&gt;ALL&lt;/MenuItem&gt;
              &lt;MenuItem value={'initial'}&gt;Inicial&lt;/MenuItem&gt;
              &lt;MenuItem value={'submited'}&gt;A&lt;/MenuItem&gt;
              &lt;MenuItem value={'rejeitado'}&gt;B&lt;/MenuItem&gt;
              &lt;MenuItem value={'approved'}&gt;C&lt;/MenuItem&gt;
              &lt;MenuItem value={'awaiting_payment'}&gt;D&lt;/MenuItem&gt;
              &lt;MenuItem value={'awaiting_conciliation'}&gt;E&lt;/MenuItem&gt;
              &lt;MenuItem value={'payment_done'}&gt;F&lt;/MenuItem&gt;
              &lt;MenuItem value={'payment_refused'}&gt;G&lt;/MenuItem&gt;
              &lt;MenuItem value={'finished'}&gt;H&lt;/MenuItem&gt;
              &lt;MenuItem value={'canceled'}&gt;I&lt;/MenuItem&gt; 
            &lt;/MaterialSelect&gt;
          &lt;/GridForm&gt;
  </code></pre>
  <p>this part of the code is in a different folder from the code where my button is. I tried to use useState, I import the serviceFilter inside the code where the button is. But I couldn't get it to work this way. Here's how I'm using the add service button:</p>
  <pre><code> &lt;Grid item xs={4} alignContent=&quot;right&quot; display=&quot;flex&quot; alignItems=&quot;center&quot;&gt;
                
                  &lt;Button variant=&quot;contained&quot;
                    onClick={() =&gt; addServiceItem()}
                    sx={{ marginRight: '5px' }}
                    
                  &gt;Ad Service&lt;/Button&gt;
  
              &lt;/Grid&gt;
  </code></pre>
  <p>is there a simpler way than using useState to accomplish what I would like?</p>