0

When I search about pagination i will get examples only with class components. I have confusion that how can we use Semantic pagination in react functional components (https://react.semantic-ui.com/addons/pagination/)

This is code I tried first

<Pagination defaultActivePage={5} totalPages={10} />

But

in this how to control the pagination current page and how to highlet the active page?????

Yashwanth K
  • 41
  • 6

1 Answers1

0

I am only giving solution for this one because I found it....

*export function PaginationExample() {
 const [currentPage, setCurrentPage] = useState(1);
  
 const handlePaginationChange = (e, { activePage }) =>{ 
    setCurrentPage(activePage);
 }
 
 useEffect(()=>{
  try{
const res= await axios.get(`http://localhost:3001/api/?page= 
    ${currentPage}`);

    //store this response by declaring useState and use it as per required.

    }catch(err){
    return err
     }
   },[currentPage])
  return (
    <>
            <Pagination
            
            activePage={currentPage}
            boundaryRange={1}
            onPageChange={handlePaginationChange}
            size='medium'
            siblingRange={2}
            totalPages={100}
            firstItem={null}
            lastItem={null}
            prevItem={{ content: <Icon name='angle double left'/>, 
                        icon: true }}
            nextItem={{ content: <Icon name='angle double right'/>,
                        icon: true }}
          /> 
 </>)}*
Yashwanth K
  • 41
  • 6
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 16 '23 at 01:19