How to use pagination in Reactjs application

Question

I am implementing pagination for my blog page by using react-js-pagination.

1. I am unable to fix this pagination ui and its content per page
2. Bind my data accordingly per page

I have tried to import less from bootstrap but it is not rendering for this.

Any suggestion on this to solve this pagination issue?

Updated code: it is working now //blog.js

import React, {Component} from 'react';
import {Card, Grid, Cell, Dialog, CardMenu, Button, CardTitle, 
    CardText, CardActions, FABButton, Icon} from'react-mdl';
import { Container} from 'reactstrap';
import { connect } from 'react-redux';
import { getBlog, deleteBlog } from '../../actions/resumeActions';
import PropTypes from 'prop-types';
import Loading from './Loading';
import Moment from 'moment';
import BlogModal from "./BlogModal";
import Pagination from "react-js-pagination";

class Blogs extends Component{
    constructor(props) {
        super(props);
            this.state = {
                modal: false,
                justClicked: null,
                activePage: 1
            };
        
            this.handleOpenDialog = this.handleOpenDialog.bind(this);
            this.handleCloseDialog = this.handleCloseDialog.bind(this);
        }
    
    static propTypes = {
        getContact: PropTypes.func.isRequired,
        deleteContact: PropTypes.func.isRequired,
        resume: PropTypes.object.isRequired,
        isAuthenticated: PropTypes.bool,
        auth: PropTypes.object.isRequired,
        loading: PropTypes.object.isRequired
    }

    toggle = () => {
        this.setState({
            modal: !this.state.modal
        });
    }

    handleOpenDialog(id) {
        this.setState({
          openDialog: true,
          justClicked: id
    
        });
    }
    
    handleCloseDialog() {
    this.setState({
        openDialog: false
    });
    }
    
    componentDidMount() {
        this.props.getBlog();
    }

    onDeleteBlogClick = (id) => {
        this.props.deleteBlog(id);
    };

    handlePageChange(pageNumber) {
        console.log(`active page is ${pageNumber}`);
        this.setState({activePage: pageNumber});
      }

  cardDialog(blogs, user){
    return(
        <Grid style={{padding: 0, display: 'contents'}}>
            
            {blogs.map(({ _id, blog_name, blog_desc, blog_image_link, blog_by }) => (
            <Cell col={12}>
                <Dialog open={this.state.openDialog && this.state.justClicked === _id} className="open-dialog">
                
                    <CardTitle style={{color: '#fff', height: '176px', backgroundImage: `url(${blog_image_link})`, backgroundPosition: 'center',
                    backgroundSize: 'cover',
                    backgroundRepeat: 'no-repeat'}}>{blog_name}</CardTitle>
                    <CardText>
                        {blog_desc}
                    </CardText>
                    <CardActions border>
                       <p style={{float:'right', fontWeight:'bold'}}>Author: {blog_by}</p>
                    </CardActions>
                    <CardMenu style={{color: '#fff'}}>
                        <FABButton onClick={this.handleCloseDialog} className="close-button" >
                            <Icon name="close" />
                        </FABButton>
                    </CardMenu>
                </Dialog>
            </Cell>
            ))}
        </Grid>
    )
    
  }



    render(){
        const { blogs, loading} = this.props.resume;
        const { isAuthenticated, user } = this.props.auth;
        const itemsPerPage = 1; 
        let activeBlogs = blogs.slice (itemsPerPage * this.state.activePage - itemsPerPage, itemsPerPage * this.state.activePage)
        return(
            <Container>
             
            {loading ? (
            <div><Loading/></div>
            ) : (
                <div>
                    {/* blog modal */}
                    <BlogModal />

                    {/* card dialog */}
                    {this.cardDialog(blogs, user)}

                    <Grid style={{padding: 0}} id="todo">
                        {activeBlogs.map(({ _id, blog_name, blog_by, date }) => (
                            <Cell key={_id} data-id={_id}>   
                            { this.props.isAuthenticated && (user.is_admin === true) ? 
                                <Button className="remove-btn"
                                color="danger"
                                size="sm"
                                onClick= {this.onDeleteBlogClick.bind(this, _id)}>
                                    &times;
                                </Button> : null }
                                <Card shadow={5} className="cards-grid">
                                    <CardTitle className="card-title-image"></CardTitle>
                                    <CardText>
                                        <b>{blog_name}</b>
                                    </CardText>
                                    
                                    <CardActions border>
                                        <Button className="blog-read-me-button" onClick={this.handleOpenDialog.bind(this, _id)}>Read </Button>
                                        <p style={{ fontStyle:'italic', fontWeight:'bold'}}>By-{blog_by} <span style={{float:'right',}}>{Moment(date).format('Do MMMM YYYY')}</span></p> 
                                    </CardActions>
                                </Card>  
                            </Cell>  
                        ))} 
                    </Grid>
                </div> 
                )}
                <Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={1}
                totalItemsCount={2}
                pageRangeDisplayed={1}
                onChange={this.handlePageChange.bind(this)}
                itemClass='page-item'
                linkClass='page-link'
/>
            </Container>
        ) 
   }
}

const mapStateToProps = (state) => ({
    resume: state.resume,
    isAuthenticated : state.auth.isAuthenticated,
    auth: state.auth,
    loading: state.apiCallsInProgress > 0
});

export default connect(mapStateToProps, {getBlog, deleteBlog }) (Blogs);

//current ui

Answer 1

This is the default style of react-js-pagination. You have to style it yourself. However as far as I see, you are using bootstrap in your application, so you could use their styles in the following way:

<Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={1}
                totalItemsCount={2}
                pageRangeDisplayed={1}
                onChange={this.handlePageChange.bind(this)}
                itemClass='page-item'
                linkClass='page-link'
/>