Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cellRenderer3 is not a function #1861

Open
psm-solution-group opened this issue Dec 15, 2024 · 0 comments
Open

cellRenderer3 is not a function #1861

psm-solution-group opened this issue Dec 15, 2024 · 0 comments

Comments

@psm-solution-group
Copy link

Bug Report

Please include either a failing unit test or a simple repro. You can start by forking this Code Sandbox: https://codesandbox.io/s/03qpzq1p9p?module=%2FExample.js

I want to add memo add cellRenderer function but I got an error:

cellRenderer3 is not a function

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React and react-virtualized. Paste the link to your Code Sandbox below:

function arePropsEqual(prevProps, nextProps) {
  if(prevProps === nextProps) {
    return true;
  }
  return false
}

export function VirtualizedGrid<ItemType>({
  items,
  renderItem,
  itemHeight,
  itemMinWidth,
  numColumns
}: VirtualizedGridProps<ItemType>): JSX.Element {
  const gridRef = useRef<any>(null);
  const containerRef = useRef<any>(null);
  const containerWidth = containerRef?.current?.clientWidth;

  const windowSize = useWindowSize();

  const cellRenderer: GridCellRenderer = memo(({key, style}) => (
    <div key={key} style={style}>
      <p>text</p>
    </div>
  ), arePropsEqual)
  
  useEffect(() => {
    gridRef.current?.recomputeGridSize();
    console.log('effect')
  }, [windowSize]);

  const calculateColumnCount: {
    columnCount: number;
    rowCount: number;
    itemWidth: number;
  } = useMemo(() => {
    const columnCount = Math.floor(containerWidth / itemMinWidth);
    const rowCount = Math.ceil(items.length / columnCount);
    const itemWidth = calculateItemWidth(containerWidth, columnCount);
    return {
      columnCount,
      rowCount,
      itemWidth
    }
  }, [windowSize])

  function calculateItemWidth(width: number, columnCount: number) {
    return width / columnCount;
  }
  const columnCount = numColumns ?? calculateColumnCount.columnCount;
  const rowCount = calculateColumnCount.rowCount;
  const itemWidth = calculateColumnCount.itemWidth;
  
  console.log(windowSize);
  return (
    <Container ref={containerRef}>
      <WindowScroller>
        {({ height, isScrolling, onChildScroll, scrollTop }) => (
          <AutoSizer disableHeight>
            {() => {
              console.log('HERE');
              return (
                <Grid
                  ref={gridRef}
                  autoHeight
                  columnCount={columnCount}
                  columnWidth={itemWidth}
                  width={containerWidth}
                  height={height}
                  rowCount={rowCount}
                  rowHeight={itemHeight}
                  isScrolling={isScrolling}
                  scrollTop={scrollTop}
                  onScroll={onChildScroll}
                  cellRenderer={cellRenderer}
                />
              );
            }}
          </AutoSizer>
        )}
      </WindowScroller>
    </Container>
  );
}

if I remove memo at cellRenderer function then it works. But I want to use it with memo

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

latest

Browser
OS
React
React DOM
react-virtualized
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant