CODEWITHSUNDEEP
reactjsreact-window
chobo2
chobo2

Reputation: 85875

React Window How to Pass in Components?

I am trying to implement react-window but Ia m not sure how to pass in a component that takes in it's own properties

If I have something like this

{
  items.map(
    (item, index) => {
      <MyComponent
        key={key}
        item={item}
      />;
    }
  );
}

how do I make a variable list?

The example does not show how to do this

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];

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={getItemSize}
    width={300}
  >
    {Row}
  </List>
);

Upvotes: 5

Views: 4796

Answers (1)

coreyward
coreyward

Reputation: 80140

The example is indeed confusing. This example shows how you can use react-window with an array of data instead of the generative example that the homepage shows:

class ComponentThatRendersAListOfItems extends PureComponent {
  render() {
    // Pass items array to the item renderer component as itemData:
    return (
      <FixedSizeList
        itemData={this.props.itemsArray}
        {...otherListProps}
      >
        {ItemRenderer}
      </FixedSizeList>
    );
  }
}

// The item renderer is declared outside of the list-rendering component.
// So it has no way to directly access the items array.
class ItemRenderer extends PureComponent {
  render() {
    // Access the items array using the "data" prop:
    const item = this.props.data[this.props.index];

    return (
      <div style={this.props.style}>
        {item.name}
      </div>
    );
  }
}

While itemsArray is not provided in the code sample, ostensibly you would include the props you need to pass to ItemRenderer in it, such as name as shown here. This would leave your usage looking something like this: 

<ComponentThatRendersAListOfItems
  itemsArray={[{ name: "Test 1" }, { name: "Test 2" }]}
/>

Upvotes: 7

Related Questions