React pagination queries

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=VDirdy_qZTg

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram: / ky.emrah • Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!React pagination queries • I am building pagination for React project. The pagination itself does work when I click on prev or next page buttons, but I've got 2 problems, which I can't figure out. • Browser button acts weird. I am at home page (page1) and click next page until I reach last page(page3). Now I open specific product page while at page 3 and when I click browser back button first time it correctly puts me back into page 3, but when I click again I expect to go back to page 2, but instead I am moved out of the website entirely and see some other website which I was browsing before. • Browser button acts weird. I am at home page (page1) and click next page until I reach last page(page3). Now I open specific product page while at page 3 and when I click browser back button first time it correctly puts me back into page 3, but when I click again I expect to go back to page 2, but instead I am moved out of the website entirely and see some other website which I was browsing before. • I also get this warning in chrome dev tools: • Use of history.pushState in a trivial session history context, which • maintains only one session history entry. • Use of history.pushState in a trivial session history context, which • maintains only one session history entry. • It seems like this warning indicated the problem, but how to save multiple history records? • If I manually change search query in browser from http://localhost:5173/?p=1 let's say to http://localhost:5173/?p=3 nothing happens. I see that the page refreshes and I believe my new ?p=3 query is not persisted somehow so useEffect code does not run? • If I manually change search query in browser from http://localhost:5173/?p=1 let's say to http://localhost:5173/?p=3 nothing happens. I see that the page refreshes and I believe my new ?p=3 query is not persisted somehow so useEffect code does not run? • http://localhost:5173/?p=1 • http://localhost:5173/?p=3 • ?p=3 • useEffect • Code: • let [currentPage, setCurrentPage] = useState(getCurrentPage()); • let [pagesCount, setPagesCount] = useState(0); • let [itemsCount, setItemsCount] = useState(0); • let [productData, UpdateProductData] = useState([]); • const [searchParams, setSearchParams] = useSearchParams(); • // On init • useEffect(() = { • getCurrentPage(); • setSearchParams({ p: `${currentPage}` }); • calcPagesCount(); • getData(); • }, []); • // Updates screen if query is changed by browser back button or manually changing query in url bar • useEffect(() = { • let CurrentPageFromQuery: number; • CurrentPageFromQuery = Number(location.search.replace(/\\D/g, )); • setCurrentPage(CurrentPageFromQuery); • saveCurrentPage(); • getData(); • }, [searchParams]); • // Updates query if next/prev page buttons are clicked • useEffect(() = { • saveCurrentPage(); • getData(); • setSearchParams({ p: `${currentPage}` }); • }, [currentPage]); • function prevPage() { • if (currentPage !== 1) { • getCurrentPage(); • setCurrentPage(currentPage - 1); • saveCurrentPage(); • } • } • function nextPage() { • if (currentPage !== pagesCount) { • getCurrentPage(); • setCurrentPage(currentPage + 1); • saveCurrentPage(); • } • } • function saveCurrentPage() { • sessionStorage.setItem( current page , String(currentPage)); • } • function getCurrentPage(): number { • return Number(sessionStorage.getItem( current page ) || 1); • } • async function calcPagesCount() { • const api_url = `https://****** per_page=99`; • const req = await fetch(api_url); • const products = await req.json(); • setISource of the question: • https://stackoverflow.com/questions/7... • Question and source license information: • https://meta.stackexchange.com/help/l... • https://stackoverflow.com/

#############################

New on site