hurt-tomatoH
Refine•3y ago•
8 replies
hurt-tomato

Error: A component is changing an uncontrolled input to be controlled.

Using MuiInferencer on an api that has a boolean field (isActive) it generates the following code:

              <Controller
                    control={control}
                    name="isActive"
                    // eslint-disable-next-line
                    defaultValue={null as any}
                    render={({ field }) => (
                        <FormControlLabel
                            label="Is Active"
                            control={
                                <Checkbox
                                    {...field}
                                    checked={field.value}
                                    onChange={(event) => {
                                        field.onChange(event.target.checked);
                                    }}
                                />
                            }
                        />
                    )}
                />


The problem is that in the console I get the following error:

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Are we safe to ignore this error? I don't understand enough about React and what you've generated to make a sensible decision, but I don't like my console littered with errors.
Was this page helpful?