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

Question

I am using library called react-window

When I pass props to its row like this:

{Row({...props, {otherProps}})}

it gave me an error something like:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: ...

How is the correct way to do that?

Answer 1

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