Questions tagged [react-infinite-scroll-component]
48 questions
0
votes
1 answer
Execute function when a certain section in flatList/SectionList is reached
I have an app with a list of events corresponding to certain dates . How do i utilize either flatlist or SectionList to call a function/change state when a certain section of the list is scrolled into view.
Using SectionList the header element is…
giants22
- 75
- 7
0
votes
0 answers
How to effectively refresh the data in a custom hook using react-infinite-scroll-component when an item is deleted?
I am using a custom hook useInfiniteFetchSearch to fetch and search data for a infinite scroll component built using react-infinite-scroll-component.
The hook makes an API call and sets the data in the state using setData. Currently, I am using…
Abhilash
- 43
- 1
- 8
0
votes
0 answers
React infinite scroll in an Unsplash image app
I am building an image search app using Unsplash API and trying to implement react infinite scroll (https://www.npmjs.com/package/react-infinite-scroll-component), but it is not working properly.
Now, the search form works fine and it displays 10…
haharimoto
- 84
- 1
- 1
- 6
0
votes
0 answers
Mantine ScrollArea With React Infinite Scroll
I am currently building an app which uses Mantine components. I have a list which I am paginating, and rendering using React-Infinite-Scroll-Component. I want to change the style of the scrollbar of the InfiniteScroll component to look like the…
saddiqs1
- 59
- 5
0
votes
0 answers
React table infinite scroll doesn't trigger "next" function to load new items
I am using react-infinite-scroll-component with react-table to scroll the items.
{
setFetchMoreData(true)
}}
hasMore={hasMoreData}
scrollableTarget="scrollableDiv"
…
devcodes
- 1,038
- 19
- 38
0
votes
0 answers
How to save scroll position in react-infinite-scroll-component from another page back to infinite-scroll page?
I use react-infinite-scroll-component to infinite fetch data in pageA and save the scrollY position in parameter or localstorage and click router.push(url) change to pageB.
But when I go back to pageA and use the saved parameter of scrollY to scroll…
Jerry Hsieh
- 1
- 1
0
votes
1 answer
React how to display an image on top of the entire screen when the image is generated in one of the sub-components
I use a third party component (react-infinite-scroll-component) inside some other components to display a list of objects which some of them contain an image. What I want to do is that when the user clicks on the image, the image will be presented…
zxcisnoias
- 494
- 3
- 19
0
votes
1 answer
Infinite Scrolling is not working while fetching data
I'm trying to fetch the news in my infinite scrollbar but it is not working properly and every time I run this code my laptop get stuck.
import React, { Component } from "react";
import NewsItem from "./NewsItem";
import Spinner from…
Usama Javed
- 11
- 3
0
votes
1 answer
overflowX:visible not working in react-infinite-scroll-component
So I created, the infinite scroll with second method (the scrollable component is the parrent element) and the content I am displaying might have overflow on widht/x. I tried to overwrite the infinite scroll style with overflowX:visible, but it…
BlueBeret
- 474
- 3
- 23
0
votes
2 answers
React Encountered two children with the same key
I am making a test news app with infinite scroll react but when I scroll for more news I got the same news that I have seen above and get the error in console like:
react-dom.development.js:67 Warning: Encountered two children with the
same…
Awais Zahid
- 39
- 7
0
votes
1 answer
React app not re-rendering after infinite scroll implementation
Hi guys hoping someone can help me with an issue. I built a function that fetches user posts from backend and returns them as a response:
const [posts, setPosts] = useState([]);
const newsFeed = async () => {
await axios
…
sgt_pepper85
- 421
- 4
- 14
0
votes
1 answer
React infinite scroll component - dataLength not working
I have a function newsFeed which is called by useEffect and makes a request to an endpoint to fetch all posts made by the logged in user as well as any users they follow, and then saves the data response to the state:
const [posts, setPosts] =…
sgt_pepper85
- 421
- 4
- 14
0
votes
0 answers
Hook error for React while grabbing data from Unsplash
I am fairly new to programming and this is my first question here. I am trying to grab the images from the unsplash to create a scrollable page with unlimited random images. I keep getting hook error on
setImages([...images, ...res.data]);
I am not…
Nick Ghuman
- 36
- 4
0
votes
1 answer
How can I permanently display Y scroll bar while using React Infinite Scroll Component?
I previously tried using overflow-y: scroll; in a parent div, which indeed permanently displayed the y scroll bar, but it stopped the React Infinite Scroll Component from triggering the "next" function.
The reason I want to do this is that, without…
Craig McAuliffe
- 11
- 2
0
votes
0 answers
Using infinite scroll for rendering and fetching more data using react
I wanted to add an infinite scroll component to one of my react components.
I am using react-infinite-scroll-component and want to add fetch more after a certain length.
Here is the component and I want to make an Infinite scroll on new Items
let…
gutsyDev
- 1