我正在尝试将分页应用于通过从API获取数据创建的动态表。我在从相同数据创建引导卡时应用了分页，但我不知道如何在创建表时执行此操作。
下面是我想应用分页的代码-

render(){
    return(
        <div className='container'>
            <table className='table table-striped'>
                <thead>
                    <tr>
                        <th>User_Id</th>
                        <th>User_Name</th>
                        <th>Email</th>
                        <th>Profile Picture</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.arr.map((card)=>{
                        return(
                            <tr>
                                <td>{card.user_id}</td>
                                <td>{card.user_name}</td>
                                <td>{card.email}</td>
                                <td>{'http://api.getlessuae.com/'+card.profile_picture}</td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
                            </tr>
                    ) })}
                </tbody>
             </table>
        </div>

    )

}

现在，我的表上有20个用户，我希望每页只显示5个用户。
表格如下所示-