I do not understand how to pass data to the list

I read the docs and saw the examples. All of them seem to pass to the list a component rather than a JSX. So how do I pass data to the rows? I tried adding a data tag to the List but to no avail.

import React, { useRef, useEffect } from "react";
import { VariableSizeList as List } from "react-window";

// These row heights are arbitrary.
// Yours should be based on the content of the row.
const rowHeights = new Array(1000)
    .fill(true)
    .map(() => 25 + Math.round(Math.random() * 50));

const getItemSize = index => rowHeights[index];

function Row(props) {
    console.log("props -> ", props);
    const { index, style } = props;
    return <div style={style}>Row {index}</div>;
}

const data = [
    { id: 1, name: "james" },
    { id: 2, name: "james" },
    { id: 3, name: "james" },
    { id: 4, name: "james" },
    { id: 5, name: "james" },
];
function VirtualList(props) {
    const listRef = useRef();

    useEffect(() => {
        listRef.current.scrollToItem(200, "start");
    }, []);

    return (
        <List
            ref={listRef}
            height={150}
            data={data}
            itemCount={1000}
            itemSize={getItemSize}
            width={300}
        >
            {Row}
        </List>
    );
}

export default VirtualList;

[bvaughn]

Use the itemData prop

https://react-window.now.sh/#/examples/list/memoized-list-items

On Tue, Nov 5, 2019 at 4:18 AM guywek [e-mail] wrote:

I read the docs and saw the examples. All of them seem to pass to the list a component rather than a JSX. So how do I pass data to the rows? I tried adding a data tag to the List but to no avail.

import React, { useRef, useEffect } from “react”;import { VariableSizeList as List } from “react-window”; // These row heights are arbitrary.// Yours should be based on the content of the row.const rowHeights = new Array(1000) .fill(true) .map(() => 25 + Math.round(Math.random() * 50)); const getItemSize = index => rowHeights[index]; function Row(props) { console.log("props -> ", props); const { index, style } = props; return <div style={style}>Row {index}</div>; } const data = [ { id: 1, name: “james” }, { id: 2, name: “james” }, { id: 3, name: “james” }, { id: 4, name: “james” }, { id: 5, name: “james” }, ];function VirtualList(props) { const listRef = useRef();

useEffect(() => {
    listRef.current.scrollToItem(200, "start");
}, []);

return (
    <List
        ref={listRef}
        height={150}
        data={data}
        itemCount={1000}
        itemSize={getItemSize}
        width={300}
    >
        {Row}
    </List>
);

} export default VirtualList;

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bvaughn/react-window/issues/373?email_source=notifications&email_token=AAAHHHMSYH2TZJABGG6HSY3QSFQCVA5CNFSM4JJB24X2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HW4CC7Q, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAHHHKAR3NZFLIKN3IOQE3QSFQCVANCNFSM4JJB24XQ .

[suryakumara]

the docs still confusing.