Как мне разбить эту страницу на страницы? Reactjs

---

Я получил задание от моего наставника, чтобы выяснить, как разбить следующий код на страницы, и использовать любые ресурсы, которые у меня есть, чтобы понять это. Использование ReactJS для разработки веб-приложения.
Какие еще файлы мне нужны? Я бы хотел иметь своего рода бесконечную функцию прокрутки, но даже если это просто нормальная пагинация, это тоже было бы прекрасно. Пожалуйста помочь.

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);

Что я уже пробовал:

Я пробовал использовать различные примеры бесконечного скроллера в интернете, но понятия не имею, как реализовать его в своем коде.

---