I am loading data card and when I press pagination buttons, the data changes but screen remains in the same place. How do I scroll to top when button is pressed? The application is a SPA so maybe that is causing the issue?
const getCoinsData = async () => {
try {
const response = await Axios.get(
`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=100&page=${activePage}&sparkline=true&price_change_percentage=1h%2C24h%2C7d`
);
setData(response.data);
setLoading(false);
} catch (e) {
console.log(e);
}
};
Since the application is a SPA, the page is likely not reloading when you move to next page. You'll have to manually scroll to the top of the component.
To do that, add a ref to the wrapper of the content that you want to scroll to the top of:
const wrapperRef = useRef(null);
// ... blablabla component stuff
return {
<div ref={wrapperRef}></div>
}
Then just make sure you next page button handler has access to the ref:
const handleNextPageButtonClick = async () => {
await getNextPage();
wrapperRef.current.scrollIntoView();
}
Another way you could do it is with a useEffect in the component gets the new data on page change
edit should have updated the dependencies. I am assuming your list is coming in as a variable named data. Just add that to the dependency array. You could use your data object or your isSuccess boolean if you have one.
useEffect(()=>{
window.scrollTo({top: 0});
},[data])