0
280
ViewsMaterial UI textfield 'disable' prop won't update more than once
Trying to make a program where there are radio switches each equating to a different boolean value. Depending on the boolean value, it would either make the 'disable' prop on the textfield either true or false. My code allows for the button to be default selected as enabled editing and when I select disable it disables the textfield. However, if I click disable then try and click enable again it won't change the textfield from disable.
const [radioEdit, setRadioEdit] = React.useState(false);
<RadioGroup
value={radioEdit}
onChange={(e) => setRadioEdit(e.target.value)}
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
row
>
<FormControlLabel
value={true}
control={<Radio />}
label="Disabled"
/>
<FormControlLabel
value={false}
control={<Radio />}
label="Enabled"
/>
<p>{String(radioEdit)}</p>
<TextField
id="outlined-basic"
variant="outlined"
size="small"
////////RIGHT HERE////////
value={data["companyname"]}
disabled={radioEdit}
/>
If the default state of radioEdit isn't 'false', it is automatically disabled (set to true or null) and won't let me update it multiple times.
1 answers
Answer question0
The issue is with onChange you have defined with RadioGroup. Usually, we define
onChange={(e) => setRadioEdit(e.target.value)}
to set the value of text input onEventChangeHandler. But here it's for the Radio button. I was using typescript to find the answer for this and as soon as I copy-pasted your code it showed me the error at setRadioEdit(e.target.value) whereas the setRadioEdit should be boolean. The reason why TypeScript is super useful.
The answer is
onChange={() => setRadioEdit(!radioEdit)}
I'm toggling my state here onChange. So when we setRadioEdit as true, it's actually the radioEdit would be set as true. That's how the useState hook works. So by defining setRadioEdit(!radioEdit) we are toggling the state. If it's true it changes to false and vice versa.
Also you will have to close the </RadioGroup> component. Complete answer
const [radioEdit, setRadioEdit] = useState(false);
return (
<>
<RadioGroup
value={radioEdit}
onChange={(e) => setRadioEdit(!radioEdit)}
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
row
>
<FormControlLabel value={true} control={<Radio />} label="Disabled" />
<FormControlLabel value={false} control={<Radio />} label="Enabled" />
</RadioGroup>
<p>{String(radioEdit)}</p>
<TextField
id="outlined-basic"
variant="outlined"
size="small"
disabled={radioEdit}
/>
</>
);