Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
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 ( <Item key={index} item={item} currentPage={currentPage} onClickPageNumber={onClickPageNumber} /> ); })} </ul> );}
// Page number...const Item = ({ item, currentPage, onClickPageNumber }) => { return ( <li onClick={() => onClickPageNumber(item)}> {item === currentPage ? (<p>{item + 1}</p>) : (<a href="#">{item + 1}</a>)} </li> );};
const UsersLists = ({ lists }) => { return ( <PaginatedLists lists={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 ( <PaginatedLists lists={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.
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/
Using “React render props” to create a Paginated Lists. was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.