how to pass prop into rowrender of react-virtualized

1
votes

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.

2
reactjsreact-virtualized

2 Answers

1
votes

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

0
votes

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]}/>
    );
 }
}