Getting Next Page Results
Learn how to implement paging in a MERN stack application.
We'll cover the following...
We'll cover the following...
In this lesson, we’ll learn how to implement the functionality of pagination for our Movie Reviews application.
import React from 'react' import { Switch, Route, Link } from "react-router-dom" import "bootstrap/dist/css/bootstrap.min.css" import AddReview from "./components/add-review" import MoviesList from "./components/movies-list" import Movie from "./components/movie" import Login from "./components/login" import Nav from 'react-bootstrap/Nav' import Navbar from 'react-bootstrap/Navbar' function App() { const [user, setUser] = React.useState(null) async function login(user = null){// default user to null setUser(user) } async function logout(){ setUser(null) } return ( <div className="App"> <Navbar bg="light" expand="lg"> <Navbar.Brand>Movie Reviews</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link> <Link to={"/movies"}>Movies</Link> </Nav.Link> <Nav.Link> { user ? ( <a onClick={logout}>Logout User</a> ) : ( <Link to={"/login"}>Login</Link> )} </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> <Switch> <Route exact path={["/", "/movies"]} component={MoviesList}> </Route> <Route path="/movies/:id/review" render={(props)=> <AddReview {...props} user={user} /> }> </Route> <Route path="/movies/:id/" render={(props)=> <Movie {...props} user={user} /> }> </Route> <Route path="/login" render={(props)=> <Login {...props} login={login} /> }> </Route> </Switch> </div> ); } export default App;
Initial files we will build on
Currently, we are just showing the first twenty results on our homepage. We’ll add a “Get next 20 results” link at the bottom to retrieve the results on the next page, as shown below:
Our code in the backend has already made it easy for us to retrieve results by page. In
MovieDataService
, we have the following code:
Press + to interact
getAll(page = 0){return axios.get(`http://localhost:5000/api/v1/movies?page=${page}`)}...find(query, by = "title", page = 0){return axios.get(`http://localhost:5000/api/v1/movies?${by}=${query}&page=${page}`)}
This allows us to retrieve the ...