How do I paginate this page? Reactjs

See more:

ReactJS

I've been given a task, from my tutor, to figure out how to paginate the following code, and to use whatever resources I have to figure it out. Using ReactJS, to develop a web application.
What other files do i need? I'd love to have a sort of infinite scroll feature, but even if it's just normal pagination, that would be fine too. Please help.

import React, { Component } from 'react';
import {
  Container,
  Row,
  Col,
  Card,
  CardHeader,
  CardBody,
  // CardFooter,
  CardTitle
} from 'reactstrap';
import HomePageNavbar from 'components/Navbars/HomePageNavbar';
import HomePageFooter from 'components/Footers/HomePageFooter';
import TBIHelmet from 'components/App/TBIHelmet';
import { withFirebase } from '../../components/Firebase';
import { withTBIBadWordsFilter } from '../../components/TBIBadWordsFilter';
import { compose } from 'recompose';
import FirebaseImage from 'components/App/FirebaseImage';
import pageImage from '../../assets/img/tolaga-bay-inn/Uawa River.png';
import LoadingOverlayModal from '../../components/App/LoadingOverlayModal';
import BusinessProfilePageNavbar from 'components/Navbars/BusinessProfilePageNavbar';

class BlogPostsPage extends Component {
  constructor(props) {
    super(props);
    const {
      _bpid
    } = this.props.match.params;
    this.state = {
      isLoading: true,
      dbBlogPosts: {},
      dbBlogPostsAsArray: [],
      _bpid: _bpid,
      businessProfileName: '',
      businessProfileCoreLinks: {},
      businessProfileSocialMediaLinks: {}
    };
  }
  componentDidMount = async () => {
    document.documentElement.classList.remove('nav-open');
    const {
      firebase
    } = this.props,
      {
        _bpid
      } = this.state,
      existingDbBlogPosts = await firebase.getDbBlogPosts(),
      snapshot = _bpid
        ? await existingDbBlogPosts
          .orderByChild('_bpid')
          .equalTo(_bpid)
          .once('value')
        : await existingDbBlogPosts
          .once('value'),
      dbBlogPosts = await snapshot.val(),
      dbBlogPostsAsArray = [],
      existingDbBusinessProfile = await firebase.getDbBusinessProfile(_bpid),
      dbBusinessProfileRef = await existingDbBusinessProfile.once('value'),
      dbBusinessProfile = await dbBusinessProfileRef.val(),
      authors = [];
    let name = '',
        coreLinks = {},
        socialMediaLinks = {};
    if (dbBusinessProfile) {
      name = dbBusinessProfile.name || '';
      coreLinks = dbBusinessProfile.coreLinks || {};
      socialMediaLinks = dbBusinessProfile.socialMediaLinks || {};
    }
    if (dbBlogPosts) {
      for (let key in dbBlogPosts) {
        const dbBlogPost = dbBlogPosts[key],
        {
          authorUid
        } = dbBlogPost,
        authorIndex = authors.findIndex(a =>
          a.uid === authorUid);
        let author = null;
        if (authorUid) {
          if (authorIndex === -1) {
            const dbUser = await firebase.getDbUserValue(authorUid);
            author = dbUser;
            authors.push(author);
          } else {
            author = authors[authorIndex];
          }
        }
        dbBlogPost.author = author
          ? author.displayName || author.email
          : '';
        dbBlogPostsAsArray.push(dbBlogPost);
      }
    }
    this.setState({
      isLoading: false,
      dbBlogPosts: dbBlogPosts,
      dbBlogPostsAsArray: dbBlogPostsAsArray,
      businessProfileName: name,
      businessProfileCoreLinks: coreLinks || {},
      businessProfileSocialMediaLinks: socialMediaLinks || {}
    });
  }
    handleBlogPostClick = e => {
    e.preventDefault();
    const {
      _bpid
    } = this.state;
    const {
      bpid
    } = e.currentTarget.attributes;
    if (_bpid) {
      this.props.history.push(`/BusinessProfile/${_bpid}/Blog/${bpid.value}`);
    } else {
      this.props.history.push(`/Blog/${bpid.value}`);
    }

  };

  render = () => {
    const {
      isLoading,
      _bpid,
      businessProfileName,
      businessProfileCoreLinks,
      businessProfileSocialMediaLinks
    } = this.state,
      {
        badWordsFilter
      } = this.props,
      cleanedBusinessProfileName = badWordsFilter.filter.clean(businessProfileName);
    return (
      <>
        <TBIHelmet
          name="Blog Posts"
          path="/Blog"
          description="Blog Posts are constantly happening in & around the Tolaga Bay Inn all the time for the wider community."
          subject="Welcome to the Tolaga Bay Inn. Your home away from home in the heart of the East Coast."
          keywords="tolaga bay, tolaga bay inn, tolaga bay innovation, tolaga bay nz, tolaga bay gisborne, tolaga"
        />
        {
          _bpid
            ? <BusinessProfilePageNavbar
              bpid={_bpid}
              businessProfileName={cleanedBusinessProfileName}
              coreLinks={businessProfileCoreLinks}
              socialMediaLinks={businessProfileSocialMediaLinks}
            />
            : <HomePageNavbar />
        }
        <div
          style={{
            backgroundImage: `url('${pageImage}')`,
            marginTop: '0',
            paddingTop: "100px"
          }}
          className="page-header"
        >
          <div className="filter" />
          <Container className="home-page-container">
            <Row>
              <Col className="ml-auto mr-auto">
                <div className="motto text-center"
                  style={{
                    minWidth: '450px'
                  }}>
                  <h1>Blog</h1>
                  <br />
                  <h4>Follow our blog and keep up to date with {`${_bpid ? `${cleanedBusinessProfileName}` : 'the Tolaga Bay Innovation movement'}`}.</h4>
                </div>
              </Col>
            </Row>
          </Container>
        </div>
        <br />
        <br />
        <div className="blog-page">
        {
          isLoading
            ? <LoadingOverlayModal />
            : <Container>
              <Row>
                {this.state.dbBlogPostsAsArray.map(dbBlogPost => (
                  <Col key={dbBlogPost.bpid}>
                    <Card className="blog-cards" bpid={dbBlogPost.bpid} onClick={this.handleBlogPostClick}>
                      <FirebaseImage
                        imageResize="md"
                        className="blog-posts-background-image"
                        loadingIconSize=""
                        alt={this.props.badWordsFilter.filter.clean(dbBlogPost.title)}
                        imageURL={dbBlogPost.backgroundImage} />
                      <CardHeader>
                        <CardTitle className="blog-card-title">{this.props.badWordsFilter.filter.clean(dbBlogPost.title)}</CardTitle>
                      </CardHeader>
                      <CardBody
                        className="blog-card-content"
                        dangerouslySetInnerHTML={{
                          __html: this.props.badWordsFilter.filter.clean(dbBlogPost.content)
                        }} />
                      <CardHeader>
                        <CardTitle  className="blog-card-footer">Published by {this.props.badWordsFilter.filter.clean(dbBlogPost.author)} on {dbBlogPost.publishDate}</CardTitle>
                      </CardHeader>
                    </Card>
                  </Col>
                ))}
              </Row>
            </Container>
          }
          </div>
        <HomePageFooter />
      </>
    );
  };
}

export default compose(
  withFirebase,
  withTBIBadWordsFilter
)(BlogPostsPage);

What I have tried:

I've tried using various infinite scroller examples online, but i have no idea how to implement it into my code.