I have created a Pagination from a tutorial in React like this,
const [posts, setPosts] = useState([]);
const [showPerPage] = useState(6);
const [pagination, setPagination] = useState({
start: 0,
end: showPerPage
});
const onPaginationChange = (start, end) => {
setPagination({start: start, end: end});
}
The above lines are in the main Component in which I am calling my Pagination component like this:
<Pagination showPerPage={showPerPage} onPaginationChange={onPaginationChange} totalProvider={posts.length}/>
Now I have created the Pagination Component like this,
import React, {useState, useEffect} from 'react' const Pagination = ({showPerPage, onPaginationChange, totalProvider}) => { const [counter, setCounter] = useState(1); useEffect(()=>{ const value = showPerPage * counter; onPaginationChange(value - showPerPage, value); },[counter]); const onButtonClick = (type) => { if(type==='prev'){ if(counter === 1){ setCounter(1); }else { setCounter(counter - 1); } }else if( type=== 'next'){ if(Math.ceil(totalProvider/showPerPage)=== counter){ setCounter(counter); }else { setCounter(counter + 1); } } } return ( <div className="paginationWrapper"> <span id="prevBtn" onClick={()=>onButtonClick('prev')} className="disable">Prev.</span> <div className="numberOfItems"> <span id="startCounter">{counter}</span>of<span>{Math.ceil(totalProvider/showPerPage)}</span> </div> <span id="nextBtn" onClick={()=>onButtonClick('next')}>Next</span> </div> ) } export default Pagination
This is the Setup I have, Now I want to reset the Pagination when I click on a button in Parent Component, Because on that button click I need to fetch more or less data, and in this case my pagination always stay on the number where I previously left it, I can do this 2 ways, but unable to get the code way:
Please help, Note: I am not using redux.
I think using ref is the easiest way to do it.
import React, {userRef} from "react"
function ParentComponent() {
const resetRef = useRef();
const handleReset = () => {
if (resetRef && resetReft.current) resetRef.current.resetCounter();
}
return <>
<button onClick={handleReset}>Reset</button>
<Pagination ref={resetRef} showPerPage={showPerPage} onPaginationChange={onPaginationChange} totalProvider={posts.length}/>
</>
}
Add forwardRef and resetCounter() to your Pagination component.
const Pagination = React.forwardRef(({showPerPage, onPaginationChange, totalProvider}, ref) => {
const [counter, setCounter] = useState(1);
useEffect(()=>{
const value = showPerPage * counter;
onPaginationChange(value - showPerPage, value);
},[counter]);
const onButtonClick = (type) => {
if(type==='prev'){
if(counter === 1){
setCounter(1);
}else {
setCounter(counter - 1);
}
}else if( type=== 'next'){
if(Math.ceil(totalProvider/showPerPage)=== counter){
setCounter(counter);
}else {
setCounter(counter + 1);
}
}
}
resetCounter() {
setCounter(1);
}
return (
<div className="paginationWrapper" ref={ref}>
<span id="prevBtn" onClick={()=>onButtonClick('prev')} className="disable">Prev.</span>
<div className="numberOfItems">
<span id="startCounter">{counter}</span>of<span>{Math.ceil(totalProvider/showPerPage)}</span>
</div>
<span id="nextBtn" onClick={()=>onButtonClick('next')}>Next</span>
</div>
)
})
export default Pagination
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.