How to iterate my data ?

[craigcosmo]

const TrackTable = ({ tracks }) => {
    const Row = ({ index, style }) => (
        <div
            className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
            style={style}>
            Row {index}
        </div>
    )
    const AllRows = () => {
        if (tracks.length == 0) return ''
        return tracks.map((i, index) => {
            return <div key={i.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 just like in the example it works,

But If i put my data AllRows in the , I got error like in the picture. I checked my data is good. So what I did wrong here?

[sarathms]

@craigcosmo Check out the example under itemData section in the documentation.

const TrackTable = ({ tracks }) => {
    const Row = ({ index, style, data }) => {
            const trackData = data[index]
            return (
        <div
            className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
            style={style}
                 >
            Row {index} - { trackData.code }
        </div>
    )
    return (
        <AutoSizer>
            {({ height, width }) => (
                <List
                    className="List"
                    height={height}
                    itemCount={tracks.length}
                    itemSize={35}
                    width={width}
                    itemData={tracks}
                                 >
                    {Row}
                </List>
            )}
        </AutoSizer>
    )
}