Below is my code to handle pagination and add prev and next buttons to my site.
const [pageNumber, setPageNumber] = useState(props.match.params.pageno);
useEffect(() => {setPageNumber(props.match.params.pageno)},[props]);
useEffect(() => {
async function fetchData() {
try {
const { data } = await axios.get('http://api.tvmaze.com/shows?page=' +pageNumber);
setShowsData(data);
setLoading(false);
} catch (e) {
console.log(e);
}
}
fetchData();
}, [ pageNumber ]);
return (
<div>
<Link className={pageNumber===0 ? 'hidden' : 'showlink'} to={`/shows/page/${parseInt(pageNumber)-1}`}>
Previous
</Link>
<Link className='showlink' to={`/shows/page/${parseInt(pageNumber)+1}`}>
Next
</Link>
</div>
);
App.css:
.hidden{
display:none;
}
How can I get this done?
I am trying to hide the Previous link when the page number is 0 as there is nothing before that. I tried the above code but it had no effect.
You also do condition rendering for pageNumber
like,
{ pageNumber !== 0 && <Link>{your code}</Link> }
For this condition also you've to check the type of your datatype like string
is coming in pageNumber
and you're comparing with int
then this code does not have any effect.
Using this conditional rendering you don't have to rely on the CSS part this will to conditional rendering which is handled by javascript.