article

Tuesday, December 21, 2021

ReactJS Load More Pagination Results

ReactJS Load More Pagination Results

Bootstrap : https://react-bootstrap.github.io/getting-started/introduction/

Install bootstrap

npm install react-bootstrap bootstrap@5.1.3

C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3

https://react-bootstrap.github.io/getting-started/introduction/

API call https://reqres.in/ 

https://reqres.in/api/users?per_page=2&page=1

{"page":1,"per_page":2,"total":12,"total_pages":6,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}

src/index.js
?
1
2
3
4
5
6
7
8
9
10
11
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
 
ReactDOM.render(
  <App />,
  document.getElementById('root')
)
public/index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
//public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ReactJS </title>
  </head>
  <body>
    <div id="root"></div>
</body>
</html>
src/App.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//src/App.js
import React, { useEffect, useState } from 'react';
 
function App() {
  const perPage = 2;
  const [totalPages, setTotalPages] = useState(1);
  const [page, setPage] = useState(1);
 
  const [userList, setUserList] = useState([]);
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    const getUserList = () => {
      setLoading(true);
      fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`)
        .then(res => res.json())
        .then(res => {
          setTotalPages(res.total_pages);
          setUserList([...userList, ...res.data]);
          setLoading(false);
        });
    }
    getUserList();
  }, [page]);
 
  return (
    <div className="container" style={{padding: 20}}>
        <div className="row">
            <div className="col-3"></div>
            <div class="col-6">
                <h3>ReactJS Load More Pagination Results</h3>
                {userList.map((x, i) => {
                    return <div key={i} className="box">
                    <img src={x.avatar} />
                    <div className="name">{x.first_name} {x.last_name}</div>
                    <div className="email">{x.email}</div>
                    </div>
                })}
                <div className="clearfix"></div>
                {totalPages !== page && <button className="btn btn-primary" onClick={() => setPage(page + 1)}>{loading ? 'Loading...' : 'Load More'}</button>}
            </div>
            <div className="col-3"></div>
        </div>
    </div>
  );
}
 
export default App;
src/index.css
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//src/index.css
.box {
  float: left;
  width: 200px;margin-right:20px;margin-bottom:20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #f5f5f5;
  padding-bottom: 10px;
}
 
.box img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
 
.box .name {
  padding: 10px 10px 5px 10px;
}
 
.box .email {
  font-style: italic;padding-left:10px;
  color: #666;
}
 
.clearfix {
  clear: both;margin-bottom:20px;
}

Posted by ednalan at 11:17 PM . Under .

Related Post