I'm building a React app with material-ui. I want to disable all my radio buttons in a RadioGroup when a certain event happens and re-enable them when the event goes away. (Say when I click a button, all radios are disabled, when I click the same button again, all radios are re-enabled.) I had the following conditional rendering snippet with a ternary operator which does the job but it looks really redundant. Is there a better way to do this? aka. Is there a way to make the prop (disable here) of a Material-ui component into a variable? Thanks!

const radioDisabled = false;

// Some mechanism here that could potentially 
// change the value of radioDisabled

{ radioDisabled

?

    {setValue(e.target.value)}}
    >
        }
            label='1'
        />
        }
            label='2'
        />

              ...

        }
            label='n'
        />
    

:

    {setValue(e.target.value)}}
    >
        }
            label='1'
        />
        }
            label='2'
        />

              ...

        }
            label='n'
        />