Strange Behavior with React State and MUI TextFields

Question

I have a basic set of code.. That I am trying to toggle:

{(isLinkPhone) ?
    <Box>
        <TextField
            value={phone}
            label="Phone Number"
            disabled
        />
    </Box>
    :
    <Box>
        <TextField
            defaultValue=''
            label="Link for your button *"
        />
    </Box>
}

Basically what I am trying to do is during a toggle of:

    const [isLinkPhone, setLinkisPhone] = React.useState(false);

I want to display one or the other.. The issue is that I can't set BOTH value AND defaultValue -- I am having a hard time understanding why React is treating this as the same input that cannot have a controlled and uncontrolled value. What I am trying to do is set the field to "nothing -> enabled/editable" if !isLinkPhone -- Else set it to " {phone} -> disabled" -- The issue is that the values "translate" between toggles.

Is there a better way to go about this? I am hesitant to create individual components for fear I will spend the time and get the same result. Can anyone explain why this is happening?

Answer 1

Try this

  <Box>
    {isLinkPhone && (
      <TextField value={phone} label="Phone Number" disabled />
    )}

    {!isLinkPhone && (
      <TextField defaultValue="" label="Link for your button *" />
    )}
  </Box>