Having wondered how to use render props? Great! This article will be fitted for you. I’ll be showing you how to create a Paginated Lists together with the render props. React React render props allow us to encapsulate the data that we want to share to other components. With this design it will promotes a highly reusable components in your Application. class PaginatedLists extends React.Component {constructor(props) {super(props); // By default let's start the page by 0... this.state = { currentPage: 0 }; this.onClickPageNumber = this.onClickPageNumber.bind(this); } getNumberOfPages(lists, itemsPerPage) { // Calculate the number pages to be displayed... const numberOfPages = Math.ceil(lists.length / itemsPerPage); return Array.from(Array(numberOfPages).keys()); } paginatedLists(lists, itemsPerPage) {const { currentPage } = this.state; if (!Array.isArray(lists)) new Error('Invalid supplied Lists.'); // Use array slice to create Paginated lists...return lists.slice(currentPage * parseInt(itemsPerPage, 0),(currentPage + 1) * parseInt(itemsPerPage, 0));} onClickPageNumber(page) {this.setState({ currentPage: page });} render() {const { currentPage } = this.state;const { lists, itemsPerPage } = this.props; return( <div> {this.props.render(this.paginatedLists(lists, itemsPerPage))} <PageNumbers items={this.getNumberOfPages(lists, itemsPerPage)} currentPage={currentPage} onClickPageNumber={this.onClickPageNumber} /> </div> ); }} const PageNumbers = ({items,currentPage,onClickPageNumber}) => {return(<ul>{items.map((item,index) => {return (<Itemkey={index}item={item}currentPage={currentPage}onClickPageNumber={onClickPageNumber}/>);})}</ul>);} // Page number...const Item = ({item,currentPage,onClickPageNumber}) => {return (<lionClick={() => onClickPageNumber(item)}>{item === currentPage ?(<p>{item + 1}</p>) :(<a href="#">{item + 1}</a>)}</li>);}; const UsersLists = ({ lists }) => {return (<PaginatedListslists={lists}itemsPerPage={3}render={(paginatedLists) => (<ul>{paginatedLists.map((item, id) => {return <li key={item.id}>{item.first_name} {item.last_name}</li>;})}</ul>)}/>);} ReactDOM.render(<UsersLists lists={users}/>,document.getElementById('root')); This is our finished PaginatedList Component and I’ll explain here how I achieve making this code. const UsersLists = ({ lists }) => {return (<PaginatedListslists={lists}itemsPerPage={3} />);} render={(paginatedLists) => (<ul>{paginatedLists.map((item, id) => {return <li key={item.id}>{item.first_name} {item.last_name}</li>;})}</ul>)} In our Component we have a three props. The first prop is for of items that will become paginated later. The second prop is the which will determine how many items will be displayed per page. The third prop is what we called in this prop you accepts a function that return another component component. Later PaginatedLists lists itemsPerPage render prop, Everytime we click the page number this prop will fired and receive a callback function which passed the newly updated paginated list and render the component inside it. The can be named anything you want. We named it because it was a convention in ReactJS. render prop render paginatedLists(lists, itemsPerPage) {const { currentPage } = this.state; if (!Array.isArray(lists)) new Error('Invalid supplied Lists.'); // Use array slice to create Paginated lists... } return lists.slice(currentPage * parseInt(itemsPerPage, 0),(currentPage + 1) * parseInt(itemsPerPage, 0)); Inside our PaginatedLists Component we have a function which will make our lists become paginated by using the built-in function. paginatedLists JavaScript slice this.setState({ currentPage: page });**}** onClickPageNumber(page) { The update our state and also our lists everytime the we click the page number. onClickPageNumber currentPage render() {const { currentPage } = this.state;const { lists, itemsPerPage } = this.props; return( <div> { **this.props.render( this.paginatedLists(lists, itemsPerPage) )** } <PageNumbers items={this.getNumberOfPages(lists, itemsPerPage)} currentPage={currentPage} onClickPageItem={this.onClickPageItem} /> </div> ); } In our render method inside the return function you may notice the and calling the paginatedLists function to paginate the lists**.** This code will call the that we saw earlier when we call the Component that everytime we update the currentPage state this line of code will fire and the render prop method will call also and rerender the component inside it. this.props.render(this.paginatedLists(lists, itemsPerPage)) render prop <Paginated Lists /> Output of our PaginatedLists Component. Now You can use this PaginatedLists Component through out in your application to make the lists of items become paginated. If you enjoy reading this article give me a clapped… Hope it Helps ^_^ Thanks. “Don’t be a JavaScript Mediocre.” Follow me on twitter https://twitter.com/llaudevc/
