Есть ли кто-нибудь, кто может помочь взглянуть на мой код и помочь разбить его на страницы? Использование ReactJS. Видео чат?

Question

Я использую ReactJS для выполнения этого запроса.

Я пробовал разные методы разбиения на страницы, но, поскольку я все еще учусь, я понятия не имею, что я делаю. Наш репетитор дал нашему классу различные задания для изучения в течение следующих 2 недель, мне дали задание по изучению нумерации страниц. У меня только есть проблемы с разбиением на страницы этого определенного проекта, потому что он более продвинутый по сравнению с другими проектами и учебниками для начинающих, которые я делал.

Если бы у нас был звонок по Skype или Zoom, это очень помогло бы.

Дайте мне знать, что мне нужно поделиться, и все такое:)

Очень признателен, если вы могли бы помочь.

           <Container className="blog-page">
              <Row>
                {this.state.dbBlogPostsAsArray.map(dbBlogPost => (
                  <Col key={dbBlogPost.bpid}>
                    <Card className="blog-cards" bpid={dbBlogPost.bpid} onClick={this.handleBlogPostClick}>
                      <FirebaseImage className="blog-posts-background-image"
                        imageResize="md"
                        loadingIconSize=""
                        alt={this.props.badWordsFilter.filter.clean(dbBlogPost.title)}
                        imageURL={dbBlogPost.backgroundImage} />
                      <CardHeader>
                        <CardTitle className="blog-card-title"><strong>{this.props.badWordsFilter.filter.clean(dbBlogPost.title)}</strong></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>

Что я хочу сделать, это разбить массив внизу, так что на экране сразу отображаются только 9 карт, и когда я прокручиваю их вниз, загружается больше карт. Но для этого примера я понятия не имею, с чего начать.