react-infinite-scroll-component | An awesome Infinite Scroll component in react | Frontend Framework library

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:

I'am moving my react apps into docker, I am working in legacy project and we have multiple react apps. We are attaching script with react apps in script tags on every page whose need to use this files. For docker we want to use Express to serve our files. Is there any way to run multiple watch commands ?

here is my package.json file:

I am trying to implement with the help of this library react-infinite-scroll-component (documentation) to do an infite scroll, my idea is to have the infinite scroll at the top.

I am using the live demo(code sample) provided by this library, but I am unable to implement the infinite scroll at the top, I don't know what I am doing wrong.

In the library they mention this to achieve this:

Using scroll on top

I have tried to do an infinite scroll by using React-Infinite-Scroll-Component

Everything is working perfectly as I think, but the problem is whenever I change the Genres, or press F5 to reload the page, or somehow, the scrollbar is always at the very bottom, I did try to fix it with window.scrollTo(0,0) but it's still not working.

Or somehow do I mess up the code because I tried to work around it very hard, but I don't think I execute it well enough.

The code is very long but here's a brief explanation of what I'm trying to do in it.

I received a slug which defined as a genre with useParams, for example action or adventure, then I set it as a state genreAnime, then I check if it's the same genre, it'll do the infinite load with concat array and increase the page up to 1 for the next load, else I'll set a new array and initial the page back to 1 or else it'll keep merging with an old array of previous genre. The totalPage is set to 91, whenever it renders for the second time it'll automatically get the latest totalPage and set it back, so it's safe to go.

The translateGenre is just for translating the genre into text, so please don't bother it.

But then whenever I refresh (F5) or whenever I browse for a bit, then I change the genre, it'll get a duplicate of the same first array (due to warning and I see it has 2 same items). Due to the scrollbar of mine always staying at the "end" or at the default value of React-Infinite-Scroll-Component, which is 0.8, it means when users come below 80% of the total height, it'll trigger the next function of Infinite-Scroll-Component

Here's my code:

I am creating an React project where i am rendering the data by calling the api, and api every time gives me array of data of length 10. i am using react-infinite-scroll-component for using infinite scrolling functionality. i want to load data everytime whenever i scroll at the half part of the screen i don't want to show a loader on my screen. can anybody help me on it.

I am implementing a chat view in React,and the desired behavior is that whenever new data is pushed into the dataSource, the chat view (an infinite list) scrolls to the bottom, there are many implementations, some found here: How to scroll to bottom in react?. However when I try to implement it, I am getting this strange behavior where all the views in the window are "pushed upward" out of sight by some 300px, as if to accomadate this new

I'm trying to pass the videoTitle from Link's state to my Quiz page. But I can not pass it through useLocation. It throws me this error: TypeError: Cannot destructure property 'state' of 'location' as it is undefined.

From this link component:

To this:

here is the full code of Videos page:

I'm getting this error after I've updated the packages in my package JSON file.

I have this code, where I am using useEffect to update my page with the infinite scroll. However while compiling the same, I see this error