Getting Uncaught Error: Invalid offset NaN specified on React-virtualized when my width is smaller than my item size

Question

I'm using React-Virtualized (Autosizer + List) to render a collection of 1500+ cards. It works totally fine on desktop but when I resize the viewport to smaller than my card size (ie mobile with the menu open), I get Uncaught Error: Invalid offset NaN specified

This is similar but different to these issues: https://github.com/bvaughn/react-virtualized/issues/461#issuecomment-259715859 https://github.com/bvaughn/react-virtualized/issues/461

I've dug through the console logs and logged my values and I know I'm close to figuring it out but still no dice. Here is my code.

class PosesGrid extends React.Component {
  render() {
    const { poses, classes } = this.props;

    return (
      <div style={{ height: "93vh" }}>
        <AutoSizer>
          {({ height, width }) => {
            const itemsPerRow = Math.floor(width / ITEM_SIZE);
            const rowCount = Math.ceil(poses.length / itemsPerRow);

            if (width < ITEM_SIZE) {
              const itemsPerRow = 1;
              const rowCount = poses.length; // my attempts around this
            }

            {
              /*  console.log(itemsPerRow);
            console.log(rowCount);*/
            }

            return (
              <List
                className="List"
                width={width}
                height={height}
                rowCount={rowCount}
                rowHeight={ITEM_SIZE}
                rowRenderer={({ index, key, style }) => {
                  const items = [];

                  const fromIndex = index * itemsPerRow;
                  const toIndex = Math.min(
                    fromIndex + itemsPerRow,
                    poses.length
                  );

                  for (let i = fromIndex; i < toIndex; i++) {
                    let pose = poses[i];
                    items.push(
                      <div className={classes.Item} key={i}>
                        <PoseCard
                          pose={pose}
                          activeVideo={this.props.activeVideo}
                          toggleVideoModal={this.props.toggleVideoModal}
                          favorites={this.props.favorites}
                          user={this.props.user}
                        />
                      </div>
                    );
                  }

                  return (
                    <div className={classes.Row} key={key} style={style}>
                      {items}
                    </div>
                  );
                }}
              />
            );
          }}
        </AutoSizer>
      </div>
    );
  }
}

Any ideas on how to make this mobile friendly?

Answer 1

Well, not the coolest answer but I fixed it with this:

const itemsPerRow = Math.floor(width / ITEM_SIZE) || 1;