react-paginate | A ReactJS component that creates a pagination

import AuthorSidebar from "../SubPages/AuthorSidebar";
import ReactPaginate from 'react-paginate';
import { Card, Button } from 'react-bootstrap';

export default class Author extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            author: [],
            AuthorTempState: [],
            selectedPage: 0,
            Postsperpage: 4,
            PagesVisited: 0
        }
        this.handlePageClick = this.handlePageClick.bind(this);


    }

    async recievedData() {

        const res = await fetch(`https://api.quotable.io/authors?limit=30`);

        const data = await res.json();

        for (const element of data.results) {
            element.idfav = false;
        }


        data.results.sort((a, b) => (a._id > b._id) ? 1 : -1)

        this.setState({
            author: data.results,
            AuthorTempState: data.results
        });

    }



    componentDidMount() {


        if (localStorage.getItem('authors')) {
            this.setState({
                author: JSON.parse(localStorage.getItem('authors')),
                AuthorTempState: JSON.parse(localStorage.getItem('authors'))
            })
        } else {
            this.recievedData();
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.author !== prevState.author) {
            localStorage.setItem('authors', JSON.stringify(this.state.author))
        }


    }





    favBttn(Auth) {

        const filterData = this.state.AuthorTempState.filter(data => data._id !== Auth._id)

        Auth.idfav = true;

        const updateAuthor = [Auth, ...filterData];

        updateAuthor.sort((a, b) => (a._id > b._id) ? 1 : -1)

        this.setState({
            author: updateAuthor
        });

    }

    remfavBttn(Auth) {


        const filterData = this.state.AuthorTempState.filter(data => data._id !== Auth._id)

        Auth.idfav = false;

        const updateAuthor = [Auth, ...filterData]

        updateAuthor.sort((a, b) => (a._id > b._id) ? 1 : -1)

        this.setState({
            author: updateAuthor
        });

    }




    handlePageClick = (e) => {

        const SelectedPage = e.selected;
        const Offset = SelectedPage * this.state.Postsperpage;

        this.setState({
            selectedPage: SelectedPage,
            PagesVisited: Offset
        }, () => {
            this.recievedData();
        });
    };



    render() {



        const { author } = this.state;
        const PageCount = Math.ceil(author.length / this.state.Postsperpage);

        console.log(author)
        let sliced = author.slice(this.state.PagesVisited, this.state.PagesVisited + this.state.Postsperpage);

        return (

            
                
                
                    
                        {sliced.map(
                            (Author) => (
                                
                                    
                                        
                                            Name: {Author.name}
                                                {
                                                    (Author.idfav) ? ( 
                                                        this.remfavBttn(Author)
                                                    }>Remove Favt.) : ( 
                                                        this.favBttn(Author)
                                                    }>Add Favt.)
                                                }
                                            
                                            
                                                Bio: {Author.bio}
                                            
                                        
                                        Wiki: {Author.link}
                                    


                                
                            ))}

                        
                            >"}
                                containerClassName={'paginationLinks'}
                                disabledClassName={'paginationDisabled'}
                                activeClassName={'paginationActive'}
                            />
                        
                    
                
            
        );
    }
}