React window how to iterate your data?

Question

import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
const TrackTable = ({ tracks }) => {
    const Row = ({ index, style }) => (
        <div
            className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
            style={style}>
            Row {index}
        </div>
    )
    const AllRows = () => {
        const arr = [
            { code: '12H', id: '1' },
            { code: '4gf', id: '2' },
        ]
        return arr.map((i, index) => {
            return <div key={index}>{i.code}</div>
        })
    }
    return (
        <AutoSizer>
            {({ height, width }) => (
                <List
                    className="List"
                    height={height}
                    itemCount={tracks.length}
                    itemSize={35}
                    width={width}>
                    {AllRows()}
                </List>
            )}
        </AutoSizer>
    )
}

If I put Row in the <List /> just like in the example from the author, it works,

But If i put my data AllRows in the <List />, I got error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.. I checked my data is good. So what I did wrong here?

Here the sandbox: https://codesandbox.io/s/bvaughn-react-window-fixed-size-list-vertical-forked-jqmyx?file=/index.js

Answer 1

Here is working example . Please check

const arr = [
  { code: "12H", id: "1" },
  { code: "4gf", id: "2" }
];
const AllRows = () => arr.map((i, index) => <div key={index}>{i.code}</div>);

const Example = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {AllRows}
      </List>
    )}
  </AutoSizer>
);