React Window How to Pass in Components? - reactjs

Question

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

Answer 1

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" }]}
/>