3,490 reads

Using “React render props” to create a Paginated Lists.

by Vince LlauderesSeptember 2nd, 2018

Too Long; Didn't Read

Having wondered how to use render props?

Companies Mentioned

featured image - Using “React render props” to create a Paginated Lists.

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 React render props.

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 PaginatedLists Component we have a three props. The first prop is for lists of items that will become paginated later. The second prop is the itemsPerPage which will determine how many items will be displayed per page. The third prop is what we called render prop, in this prop you accepts a function that return another component component. Later 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 render prop can be named anything you want. We named it render because it was a convention in ReactJS.

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 paginatedLists which will make our lists become paginated by using the JavaScript built-in slice function.

onClickPageNumber(page) { this.setState({ currentPage: page });**}**

The onClickPageNumber update our currentPage state and also our lists everytime the we click the page number.

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 this.props.render(this.paginatedLists(lists, itemsPerPage)) and calling the paginatedLists function to paginate the lists**.** This code will call the render prop that we saw earlier when we call the Component <Paginated Lists /> 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.