how to pass prop into rowrender of react-virtualized - reactjs

Question

I'm trying to render a card list with react-virtualized. The posts data on this particular component is passed as a prop from the parent. This is what I currently have in my component class.
state = {
listHeight: 1000,
listRowHeight: 800,
listRowWidth: 1000,
rowCount: 10
}
rowRenderer ({ index, key, style, posts }) {
if (!posts) {
return <div></div>
} else {
return (
<PostItem key={key} style={style} post={posts[index]}/>
);
}
}
render() {
return (
<div className="ui container">
<div id="postListContainer" className="ui relaxed list">
<List
width={this.state.listRowWidth}
height={this.state.listHeight}
rowHeight={this.state.listRowHeight}
rowRenderer={this.rowRenderer}
rowCount={this.state.rowCount}
posts={this.props.posts}
/>
</div>
</div>
);
}
}
I hardcoded the rowCount since I know I have 10 items in my posts array currently. Just for context, this was my original code that renders the entire list successfully.
renderPosts() {
return this.props.posts.map(post => {
return (
<PostItem key={post._id} post={post}/>
);
})
}
render() {
return (
<div className="ui container">
<div id="postListContainer" className="ui relaxed list">
{this.renderPosts()}
</div>
</div>
);
}
}
The issue i'm currently having is that I can't access the props passed down into this component from my rowRenderer function so it gives me an undefined error. So my question is, how do I access the posts props in the rowRenderer function? I'm just trying to return a PostItem component for each post in the posts prop array.

Answer 1

The signature for rowRenderer looks like this:
function rowRenderer ({
index, // Index of row
isScrolling, // The List is currently being scrolled
isVisible, // This row is visible within the List (eg it is not an overscanned row)
key, // Unique key within array of rendered rows
parent, // Reference to the parent List (instance)
style // Style object to be applied to row (to position it);
// This must be passed through to the rendered row element.
}) { .. }
So you don't get access to the props through the arguments. You can access the props via the instance variable, this.
You should bind your handler when you pass it into List like this:
<List
...
rowRenderer={this.rowRenderer.bind(this)}
/>
then inside of rowRenderer you can simpy access this.props.posts

Answer 2

You can access the properties sent from List tag in rowRenderer method using parent that is received in rowRenderer.Checkout signature here
rowRenderer ({ index, key, style, parent }) {
const posts = parent.props.posts;
if (!posts) {
return <div></div>
} else {
return (
<PostItem key={key} style={style} post={posts[index]}/>
);
}
}
That should solve your problem.Also you can access props either by binding this variable to rowrenderer method or by ES6 syntax
rowRenderer = ({ index, key, style, parent }) => {
const posts = parent.props.posts;
const { someThing } = this.props;
if (!posts) {
return <div></div>
} else {
return (
<PostItem key={key} style={style} post={posts[index]}/>
);
}
}