From the course: Rendering Data in React
Join today to access over 24,800 courses taught by industry experts.
Solution: Only five items at a time - React.js Tutorial
From the course: Rendering Data in React
Solution: Only five items at a time
- [Instructor] All right. Let's see how we can update this code to actually show the books per five, so we want to update it to be a paginated book list. Well, first of all, we need to modify the displayedBooks to only display five books at a time. So, let's go ahead and use the slice method on our books. I need to specify two numbers, the starting index and the end index. Well, the starting index is calculated by grabbing the page and subtracting 1, and then multiply it by books per page. The second number is simply page times books per page. You can see we already have the Books 1, 2, 3, 4, 5. But if I click the Next button, nothing happens, so what we need to change as well is the click functionality for the buttons. So, let's go ahead and add the onClick functionality. So when the button is clicked, I'm going to specify that when I click the Previous button that I will update page to be the current page minus one. The disabled functionality has already been implemented. As you can…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.