Create a Paginate Component Using Render Props in React
In this video, we'll walk through accomplishing the common UI task of client-side pagination in React. We'll implement a render prop component to encapsulate the chunking/windowing logic of a large array of items that will provide our render prop function with the correct items for the current page. Our Paginate render prop component will not have any opinion or knowledge relating to UI and will only be responsible for providing our render prop function with the relevant data that it needs to render the current items along with our pagination.
Related reading from the React docs: Use Render Props for Cross-Cutting Concerns
Instructor: [00:00] We're already rendering our tweets to the screen. We have state.tweets which we map over here, and we pipe that into our existing tweet component. We also have a pagination component that provides us the UI that we see down here.
[00:14] Imagine that we can make a large request and we can handle, say, 30 or up to hundreds of tweets that we can hold in memory. We want to paginate those on the client just to give a more compact UI for our user. We're going to be writing a new component here and we would just call this paginate.
[00:33] We'll go ahead and destructure out the props that we're expecting here. What we're going to focus on here is that this is going to also accept a render prop. This is just another prop -- we'll call it render for now -- that is going to invoke that function.
[00:48] We can illustrate this. We'll take our items that are props, and we would just slice that and take the first two. Where we are mapping over our tweets, we're going to make use of our paginate component. Paginate accepts the items, page, perPage, and our render function here. We know that this is going to accept the object, which is going to contain items on it.
[01:10] Instead of mapping over tweets from state, we'll map over items. We could see that this has sliced those items down to only the first two. To slice these into the appropriate window, what we can do is we need to calculate our N slice. We can begin slicing at the N slice minus perPage.
[01:30] The way we can calculate this N slice is going to be current page and multiply that by the perPage. If we come here and go to page two, the only one remaining out of our four was Cool Cat four.
[01:45] We will introduce our page into state. We'll begin on page one, and we'll add a setPage function here. This setPage is going to take the current page out of state. If we crank up our number of tweets that we're beginning with and set our page here, this state.page, we'll see that this window is now updating appropriately for which page we're currently on.
[02:10] One additional piece of information that we're going to require from our paginate component is this lastPage value. We're going to grab this pagination. We're going to render this inside of our render method, so that we can have that value passed through our render parameters here.
[02:28] In order to calculate this last page, and we would just take the math.ceiling result of the number of items divided by the perPage. At three per page, with 30 tweets, we end up with 10 pages. If we crank this down, we'll see 1, 2, 3, and, on page 4, we have only the one tweet remaining.
[02:49] Commonly, we'll see these render props defined as children. Just to illustrate that, and that children is just another prop, if we come down here, we can just rename this also to children. That's going to be working just the same. This enables that nesting that maybe you are used to in your React components.
[03:10] To recap, all we've done is we've created this component here that takes some props as an input and invokes its render prop -- in this case that's children -- so that it can wrap up some of the logic. In this case, we are paginating items client-side to encapsulate logic or state, provide a more pleasant API, and enable us to reuse this throughout our applications.