controlled radio button warning handling it's value with formik field

Question

I have created radio button that it's value is handled by Formik field. So that I can access to a selected radio button value with other formik field input values on submit as well as I can simply reuse the radio button feature.

The Radio Button works. I can get the value with other input values when I click the submit button. But I am getting a warning message below.

Warning: Material-UI: A component is changing a controlled RadioGroup to be uncontrolled.
Input elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled RadioGroup element for the lifetime of the component.
    in RadioGroup (created by RadioButtonGroup)
    in RadioButtonGroup (created by FieldInner)
    in FieldInner (created by Context.Consumer)
    in Context.Consumer (created by FormikConnect(FieldInner))
    in FormikConnect(FieldInner) (created by BankAccountOptions)
    in BankAccountOptions (created by EditUserForm)
    in EditUserForm (created by Formik)
    in Formik (created by DeleteUserFormBox)
...

I think that I need to find a way to handle 'checked' prop and make sure that it have true || false boolean. I have tried to manually control props with 'setFieldValue' onChange in RadioButtonGroup component. But I can only access to the value from there.

Please Click here to see my code sample.

clicking 'radio button' link in indexPage will lead you to the sample page. You can find the related code in users and shared folders.

Thank you !!

I tried your demo but the error that you're talking about is not showing up — brijmcq

Jiah827 Jiah827 · Accepted Answer · 2019-11-01T03:18:56

I added 'value' prop to 'RadioGroup' and the error message is gone now.

const RadioButtonGroup = ({
  field: { onChange, name, value, ...rest },
  form: { errors, touched, setFieldValue },
  ...props
}) => {
  const errorMessage = getIn(errors, name);
  const isTouched = getIn(touched, name);

  const change = (e, name, shouldValidate) => {
    e.persist();
    const inputValue = e.target.value;
    return setFieldValue(name, inputValue, shouldValidate);
  };

  return (
    <React.Fragment>
      <RadioGroup
        id="radioGroup"
        value={value || ''}
        onChange={e => change(e, name, true)}
        {...rest}
        {...props}
        row
      />
      <p style={styles}>{isTouched && errorMessage}</p>
    </React.Fragment>
  );
};

export default RadioButtonGroup;

```

controlled radio button warning handling it's value with formik field

1 Answers