(react-window) How to pass props to {Row} in <FixedSizeList>{Row}</FixedSizeList>

You add props to data property of the parent element. Pay attention to itemData={{ testData: "123", otherData: true }}.

const Example = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
        itemData={{ testData: "123", otherData: true }}
      >
        {Row}
      </List>
    )}
  </AutoSizer>
);

And then in Row component you can get data from props like this const { data, index, style } = props;

const Row = props => {
  const { data, index, style } = props;
  return (
    <div>
      {index} Row {data.testData}
    </div>
  );
};

Demo to see it in action: https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-dtnre

Tags:

Reactjs

React Props

React Window

Related