如何在reactjs组件中创建分页

Question

限制每页的卡片数量，并且还希望在react组件中进行分页

我是初学者，我不知道该如何添加分页。任何建议。

 import React, { Component } from 'react';
 import './content.css';
 import axios from 'axios';

 class Content extends Component {
   constructor(props){
    super(props);
    this.state = {
        laptops:[],
        loading:true
    };
  }

  componentDidMount() {
    axios.get(`http://localhost:3000/api/tmmobiles`,{

    })

      .then(res => {
        console.log(res);
        this.setState({ laptops:res.data,
            loading:false
         });
      })
      .catch(error => console.log(error))
  }


            render() {

                    if (this.state.loading) {
                        return <div>Loading...</div>
                    } else

    return this.state.laptops.map(items => {
        return (
            <div class="row" >
              <div class = "col-3">
                <div class="card card-body">
                <span>{items.discount}</span>
                <img  src ={items.image} alt="loading"></img>
                <span>{items.title}</span>
                <a href={items.url} target="_">click to buy</a>
                <div>availability: {items.availability}</div>
                <span>{items.source}</span>
                <div>
                    <span ></span> 
                    <span >{items.regularPrice}</span>
                </div>
                <div>{items.oldPrice}</div>

                </div>
                 </div>

                    </div>
        );
    })
}
}

  export default Content;

我想使每页卡片数为24，并且还希望为此创建分页