Блог

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

Я хочу, чтобы первая кнопка была перед одной кнопкой, а последняя кнопка была после следующей кнопки.

как выглядит приведенный ниже код выше.

чего я хочу достичь ниже

 ``` 
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';
import './styles.css'
 
export default function App() {
 const [postsPerPage] = useState(5);
 const [offset, setOffset] = useState(1);
 const [posts, setAllPosts] = useState([]);
 const [pageCount, setPageCount] = useState(0)
 
 const getPostData = (data) => {
   return (
     data.map(post => <div className="container" key={post.id}>
       <p>User ID: {post.id}</p>
       <p>Title: {post.title}</p>
     </div>)
   )
 
 }
 
 const getAllPosts = async () => {
   const res = await axios.get(`https://jsonplaceholder.typicode.com/posts`)
   const data = res.data;
   const slice = data.slice(offset - 1 , offset - 1   postsPerPage)
 
   // For displaying Data
   const postData = getPostData(slice)
 
   // Using Hooks to set value
   setAllPosts(postData)
   setPageCount(Math.ceil(data.length / postsPerPage))
 }
 
 const handlePageClick = (event) => {
   const selectedPage = event.selected;
   setOffset(selectedPage   1)
 };
 
 useEffect(() => {
   getAllPosts()
 }, [offset])
 
 return (
   <div className="main-app">
    
     {/* Display all the posts */}
     {posts}
 
     {/* Using React Paginate */}
     <ReactPaginate
       previousLabel={"previous"}
       nextLabel={"next"}
       breakLabel={"..."}
       breakClassName={"break-me"}
       pageCount={pageCount}
       onPageChange={handlePageClick}
       containerClassName={"pagination"}
       subContainerClassName={"pages pagination"}
       activeClassName={"active"} />
   </div>
 );
}
```
 

Ниже приведен css

 .main-app {
  margin: 2% 10%;
  border: 1px ridge #464141;
  padding: 5%;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 20px;
  color: #464141;
 }
    
 .container {
  border-bottom: #fff 2px ridge;
 }
  
 .pagination {
  margin-top: 45px;
  margin-left: -40px;
  display: flex;
  list-style: none;
  outline: none;
 }
  
 .pagination>.active>a {
  background-color: #47ccde;
  color: #fff;
 }
  
 .pagination>li>a {
  border: 1px solid #47ccde;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
 }
  
 .pagination>li>a, .pagination>li>span {
  color: #47ccde;
  background-color: azure;
 }