React warning MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized

Question

I'm trying to render a mui Switch component with default checked value. But it isn't working and i'm getting the warning.

MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized. To suppress this warning opt to use a controlled SwitchBase. 3 useControlled.js:27

I have also tried setting checked property along with onChange but still it doesn't work! I can't figure out what i'm doing wrong here.

{details.schedule.days.map((d) => (
                <StyledTableRow>
                  <TableCell>
                    <Typography variant="subtitle1" fontWeight="bold">
                      {d.day}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <FormControlLabel
                      control={
                        <Switch
                          onChange={(e, checked) => {
                            setDetails((p) => {
                              let prev = { ...p };
                              prev.schedule?.days?.find(
                                (el) =>
                                  el.day === d.day &&
                                  (d.open = e.target.checked)
                              );
                              return prev;
                            });
                          }}

                          defaultChecked={d.open}
                        />
                      }
                      labelPlacement="bottom"
                      label={d?.open ? `Open` : `Closed`}
                    />
                  </TableCell>
                </StyledTableRow>
              ))}

Hey. i tried setting `checked` property too. And it still defaults to false along with warning even when input it true. — Shreyas Jadhav, Oct 12 '21 at 14:24
Change `defaultChecked` to `checked` and then add an alternative like so `checked={d.open || false}` — Sean, Nov 29 '21 at 11:28
The fallback value that @Sean suggested is what fixed this for me — cBlaine, Jan 21 '23 at 22:08

score 16 · Answer 1 · answered Mar 17 '22 at 10:06

16

use "checked" instead of "defaultChecked" will address this waring

answered Mar 17 '22 at 10:06

DongThach

171
1
3

1

I got another error `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`. Is it possible to avoid both? – Beast Mar 01 '23 at 10:20

score 3 · Answer 2 · answered Mar 15 '22 at 18:47

I was also getting the same error when using the defaultChecked property on a controlled switch.

As mentioned in the comments you should use the checked property.

In the docs it says in regard to the defaultChecked property:

Use when the component is not controlled

https://mui.com/api/switch/#props

score 3 · Answer 3 · answered Mar 20 '23 at 15:23

I got exactly the same error once I used a controlled checkbox and put checked={value} without defaultValue so prevent such an issue I had to add defaultValue you can set it false or true or whatever according to your logic

<Controller
  control={control}
  name={`${item.id}`}
  defaultValue={!!evaluationDimensions?.[item.id]?.selected} 
  render={({ field: { onChange, value } }) => (
    <FormControlLabel
      control={
        <Checkbox
          checked={value}
          onChange={onChange}
        />
      }
    />
  )}
/>

score 1 · Answer 4 · answered Dec 21 '22 at 20:41

For my warning error to go away I had to specify if checked was true or false.


                <FormControlLabel
                     control={
                        !isChecked ? (
                           <Checkbox checked={false} />
                        ) : (
                           <Checkbox checked={true} />
                        )
                     }
                     label={face}
                     onChange={() => handleChange(face)}
                  />

score 0 · Answer 5 · answered Aug 23 '23 at 12:11

0

To avoid both error, you can just use checked={!!d.open} instead of defaultChecked={d.open}. Because if your initial state is null, it will be treated as undefined. Put !! before the value, if it's null, it will be treated as false.

answered Aug 23 '23 at 12:11

vivi zh

1

React warning MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized

5 Answers5