Browse Source

[web] Fix a warning about MUI component switch state on using the select all checkbox

The issue here was that since the checkbox property would get initialized to an
undefined value, React would consider it to be uncontrolled. But later on we'd
try to set a value, which'd cause React to complain.

Ref:
- Material-UI: A component is changing the uncontrolled checked state of SwitchBase to be controlled
  https://stackoverflow.com/questions/69259429/material-ui-a-component-is-changing-the-uncontrolled-checked-state-of-switchbas
Manav Rathi 1 year ago
parent
commit
8c9a11fc62
1 changed files with 2 additions and 2 deletions
  1. 2 2
      web/apps/photos/src/components/PhotoList/index.tsx

+ 2 - 2
web/apps/photos/src/components/PhotoList/index.tsx

@@ -786,7 +786,7 @@ export function PhotoList({
                                 <Checkbox
                                 <Checkbox
                                     key={item.date}
                                     key={item.date}
                                     name={item.date}
                                     name={item.date}
-                                    checked={checkedDates[item.date]}
+                                    checked={!!checkedDates[item.date]}
                                     onChange={() =>
                                     onChange={() =>
                                         onChangeSelectAllCheckBox(item.date)
                                         onChangeSelectAllCheckBox(item.date)
                                     }
                                     }
@@ -804,7 +804,7 @@ export function PhotoList({
                         <Checkbox
                         <Checkbox
                             key={listItem.date}
                             key={listItem.date}
                             name={listItem.date}
                             name={listItem.date}
-                            checked={checkedDates[listItem.date]}
+                            checked={!!checkedDates[listItem.date]}
                             onChange={() =>
                             onChange={() =>
                                 onChangeSelectAllCheckBox(listItem.date)
                                 onChangeSelectAllCheckBox(listItem.date)
                             }
                             }