I am beginner in using ReactJS. I have an error regarding my ponent radio button group from material UI. I have a radio button that has a value of boolean.

When I tried to click a value in my radio button, it doesn't select but the console log from onchange function was fired and an error will display like this : Material-UI: A ponent is changing the default value state of an uncontrolled RadioGroup after being initialized. To suppress this warning opt to use a controlled RadioGroup.

Here is my full code:

<Grid item>                        
    <RadioGroup row aria-label="privateEntity" name="privateEntity" defaultValue={state.privateEntity} onChange={changePrivateEntity}>
        <FormControlLabel value={true} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="YES" />
        <FormControlLabel value={false} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="NO" />
    </RadioGroup>
</Grid>

Here is my onchange function:

const changePrivateEntity = (event, value) => {
    event.persist();
    // console.log(value);
    let x = value === 'true' ? true : false;    
    setState((prev) => ({
      ...prev,
      privateEntityDefined: true,
      privateEntity: x,
      inputErrors: {
        ...prev.inputErrors,
        privateEntity: false,
      },
      inputHelpTexts: {
        ...prev.inputHelpTexts,
        privateEntity: '',
      },
    }));
  };

Here is my state initialization :

const [state, setState] = useState({
    privateEntity: selectedRecord ? selectedRecord.agency.private_entity : null,
    privateEntityDefined: !!selectedRecord,
})

I am beginner in using ReactJS. I have an error regarding my ponent radio button group from material UI. I have a radio button that has a value of boolean.

When I tried to click a value in my radio button, it doesn't select but the console log from onchange function was fired and an error will display like this : Material-UI: A ponent is changing the default value state of an uncontrolled RadioGroup after being initialized. To suppress this warning opt to use a controlled RadioGroup.

Here is my full code:

<Grid item>                        
    <RadioGroup row aria-label="privateEntity" name="privateEntity" defaultValue={state.privateEntity} onChange={changePrivateEntity}>
        <FormControlLabel value={true} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="YES" />
        <FormControlLabel value={false} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="NO" />
    </RadioGroup>
</Grid>

Here is my onchange function:

const changePrivateEntity = (event, value) => {
    event.persist();
    // console.log(value);
    let x = value === 'true' ? true : false;    
    setState((prev) => ({
      ...prev,
      privateEntityDefined: true,
      privateEntity: x,
      inputErrors: {
        ...prev.inputErrors,
        privateEntity: false,
      },
      inputHelpTexts: {
        ...prev.inputHelpTexts,
        privateEntity: '',
      },
    }));
  };

Here is my state initialization :

const [state, setState] = useState({
    privateEntity: selectedRecord ? selectedRecord.agency.private_entity : null,
    privateEntityDefined: !!selectedRecord,
})

• javascript
• reactjs
• material-ui
• radio-group

• Is state.privateEntity initially defined, and then you are changing it? Can you update your question to include a MCRE? – Drew Reese Commented Aug 24, 2021 at 7:23
• @DrewReese yes... I'll show it and show my initial states. – Jc John Commented Aug 24, 2021 at 7:24
• Looks like you really want a controlled input since you are updating the value and pass an onChange handler. Change defaultValue to value. – Drew Reese Commented Aug 24, 2021 at 7:27

1 Answer 1

Because you don't pass value for RadioGroup ponent so it'll show this warning:

Just update defaultValue to value

value={state.privateEntity}