Currently, I am developing a React application using material-ui. My goal is to disable all radio buttons within a RadioGroup when a specific event occurs, and then re-enable them once the event is no longer active. For example, when a button is clicked, the radios should be disabled, and when the same button is clicked again, they should be re-enabled. I have implemented a conditional rendering solution using a ternary operator, but it seems quite redundant. I am wondering if there is a better way to achieve this. Is there a method to dynamically set the disable prop of a Material-UI component to a variable? Thank you!
const radioDisabled = false;
// Some mechanism here that could potentially
// change the value of radioDisabled
{ radioDisabled
?
<RadioGroup row
value={value}
onChange={(e)=>{setValue(e.target.value)}}
>
<FormControlLabel
value='1'
checked={value === '1'}
control={<Radio/>}
label='1'
/>
<FormControlLabel
value='2'
checked={value === '2'}
control={<Radio/>}
label='2'
/>
...
<FormControlLabel
value='n'
checked={value === 'n'}
control={<Radio/>}
label='n'
/>
</RadioGroup>
:
<RadioGroup row
value={value}
onChange={(e)=>{setValue(e.target.value)}}
>
<FormControlLabel
disabled // the only difference from above
value='1'
checked={value === '1'}
control={<Radio/>}
label='1'
/>
<FormControlLabel
disabled // the only difference from above
value='2'
checked={value === '2'}
control={<Radio/>}
label='2'
/>
...
<FormControlLabel
disabled // the only difference from above
value='n'
checked={value === 'n'}
control={<Radio/>}
label='n'
/>
</RadioGroup>