Protect against children that may be null, this happens with conditio…

[jeffras]

…nal rendering https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

Thanks for submitting a pull request to RGL!

Please reference an open issue. If one has not been created, please create one along with a failing
example or test case.

Please do not commit built files (/dist) to pull requests. They are built only at release.

[jeffras]

Added issue 1297 for this PR

[STRML]

I haven't seen this come up before, do you have an example of where this is causing problems?

[jeffras]

Here is the code that reproduces the issue. I believe using the inline condition returns a null child on the false case

import { WidthProvider, Responsive } from "react-grid-layout";

const ResponsiveReactGridLayout = WidthProvider(Responsive);
const originalLayouts = getFromLS("layouts") || {};

/**
 * This layout demonstrates how to sync multiple responsive layouts to localstorage.
 */
export default class ResponsiveLocalStorageLayout extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      layouts: JSON.parse(JSON.stringify(originalLayouts))
    };
  }

  static get defaultProps() {
    return {
      className: "layout",
      cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
      rowHeight: 30
    };
  }

  resetLayout() {
    this.setState({ layouts: {} });
  }

  onLayoutChange(layout, layouts) {
    saveToLS("layouts", layouts);
    this.setState({ layouts });
  }

  render() {
    const test = false; //NOTE: true works fine, but false seems to return a null child which crashes

    return (
      <div>
        <button onClick={() => this.resetLayout()}>Reset Layout</button>
        <ResponsiveReactGridLayout
          className="layout"
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
          rowHeight={30}
          layouts={this.state.layouts}
          onLayoutChange={(layout, layouts) =>
            this.onLayoutChange(layout, layouts)
          }
        >
        {test &&
          <div key="1" data-grid={{ w: 2, h: 3, x: 0, y: 0, minW: 2, minH: 3 }}>
            <span className="text">1</span>
          </div>
          }
          <div key="2" data-grid={{ w: 2, h: 3, x: 2, y: 0, minW: 2, minH: 3 }}>
            <span className="text">2</span>
          </div>
          <div key="3" data-grid={{ w: 2, h: 3, x: 4, y: 0, minW: 2, minH: 3 }}>
            <span className="text">3</span>
          </div>
          <div key="4" data-grid={{ w: 2, h: 3, x: 6, y: 0, minW: 2, minH: 3 }}>
            <span className="text">4</span>
          </div>
          <div key="5" data-grid={{ w: 2, h: 3, x: 8, y: 0, minW: 2, minH: 3 }}>
            <span className="text">5</span>
          </div>
        </ResponsiveReactGridLayout>
      </div>
    );
  }
}

function getFromLS(key) {
  let ls = {};
  if (global.localStorage) {
    try {
      ls = JSON.parse(global.localStorage.getItem("rgl-8")) || {};
    } catch (e) {
      /*Ignore*/
    }
  }
  return ls[key];
}

function saveToLS(key, value) {
  if (global.localStorage) {
    global.localStorage.setItem(
      "rgl-8",
      JSON.stringify({
        [key]: value
      })
    );
  }
}```

[jeffras]

And the error

[github-actions]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this PR will be closed in 7 days

[chenzhutian]

Is this pr merged?

[PierrickLozach]

Will this be merged? I am also facing this issue with conditional rendering

[STRML]

Merged in 2591bf7

[PierrickLozach]

Will you add this into a new release? I just pulled via yarn again (yarn add react-grid-layout) and I still get this from lib/utils.js:

  React.Children.map(a, c => c.key),
  React.Children.map(b, c => c.key)

instead of

  React.Children.map(a, c => c?.key),
  React.Children.map(b, c => c?.key)

[STRML]

This is in 1.3.0.

[PierrickLozach]

Thanks! Issue is fixed now.