Material UI textfield 'disable' prop won't update more than once

Question

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.

Answer 1

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}
  />
</> 

 );