reactjsreact-propsreact-window

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


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?


Solution

  • 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