Merge react-grid-layout#1296; allow null children

Squashed commit of the following:

commit 5dfce15
Author: Jeff Rasmussen <[email protected]>
Date:   Mon Oct 5 14:51:58 2020 -0600

    Check for null or undefined

commit 79cf5bd
Author: Jeff Rasmussen <[email protected]>
Date:   Mon Oct 5 14:51:27 2020 -0600

    Undo vs code "help" regarding formatting style

commit b20a36c
Author: Jeff Rasmussen <[email protected]>
Date:   Mon Oct 5 14:20:44 2020 -0600

    Fix missed !

commit 36fede3
Author: Jeff Rasmussen <[email protected]>
Date:   Mon Oct 5 14:14:14 2020 -0600

    change check to validate against null instead of coercion to bool

commit c0e3a28
Author: Jeff Rasmussen <[email protected]>
Date:   Mon Oct 5 14:12:18 2020 -0600

    change check to validate against null instead of coercion to bool

commit 91a4650
Author: Jeff Rasmussen <[email protected]>
Date:   Mon Sep 21 12:57:44 2020 -0600

    Protect against children that may be null, this happens with conditional rendering https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

Author: STRML

lib/ReactGridLayoutPropTypes.js

@@ -227,11 +227,12 @@ export default {
 
   // Children must not have duplicate keys.
   children: function (props: Props, propName: string) {
-    var children = props[propName];
+    const children = props[propName];
 
     // Check children keys for duplicates. Throw if found.
-    var keys = {};
+    const keys = {};
     React.Children.forEach(children, function (child) {
+      if (child?.key == null) return;
       if (keys[child.key]) {
         throw new Error(
           'Duplicate child key "' +

lib/utils.js

@@ -159,8 +159,8 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
  */
 export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
   return isEqual(
-    React.Children.map(a, c => c.key),
-    React.Children.map(b, c => c.key)
+    React.Children.map(a, c => c?.key),
+    React.Children.map(b, c => c?.key)
   );
 }
 
@@ -687,11 +687,14 @@ export function synchronizeLayoutWithChildren(
 
   // Generate one layout item per child.
   const layout: LayoutItem[] = [];
-  React.Children.forEach(children, (child: ReactElement<any>, i: number) => {
+  React.Children.forEach(children, (child: ReactElement<any>) => {
+    // Child may not exist
+    if (child?.key == null) return;
+
     // Don't overwrite if it already exists.
     const exists = getLayoutItem(initialLayout, String(child.key));
     if (exists) {
-      layout[i] = cloneLayoutItem(exists);
+      layout.push(cloneLayoutItem(exists));
     } else {
       if (!isProduction && child.props._grid) {
         console.warn(
@@ -707,17 +710,17 @@ export function synchronizeLayoutWithChildren(
           validateLayout([g], "ReactGridLayout.children");
         }
         // FIXME clone not really necessary here
-        layout[i] = cloneLayoutItem({ ...g, i: child.key });
+        layout.push(cloneLayoutItem({ ...g, i: child.key }));
       } else {
         // Nothing provided: ensure this is added to the bottom
         // FIXME clone not really necessary here
-        layout[i] = cloneLayoutItem({
+        layout.push(cloneLayoutItem({
           w: 1,
           h: 1,
           x: 0,
           y: bottom(layout),
           i: String(child.key)
-        });
+        }));
       }
     }
   });