how we can fetch new data when scrolling both directions(up and down)

[shafa909]

I have created an infinite scrolling using react-virtouso. and it is working proper too. in the given example it fetch data when we scroll-down and when we reach on the end, and it append to existing data.

when we scroll-up it show the already fetch data.

I need to find a way to fetch new data, when we scroll-up instead of showing already fetch data.

const app = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [data, setData] = useState([]);

  const fetchData = async () => {
    fetch(`https://dummyapi.io/data/v1/user?limit=10&page=${currentPage}`)
      .then(response => response.json())
      .then(result => {
        setData(data => [...data, ...result.data]);
        setCurrentPage(page => page + 1);
      })
      .catch(error => console.log("error", error));
  };

  return( 
     <Virtuoso
        style={{ height: 1000 }}
        data={data}
        endReached={fetchData}
        itemContent={(index, data) => {
          let bgColor = "";
          if (index % 2 === 0) {
            bgColor = "yellow";
          } else {
            bgColor = "blue";
          }

          return (
            <div style={{ background: bgColor }}>
              <div>{data.name}</div>
            </div>
          )}
        }
     />
   )}
}

[shafa909]

@petyosi any solution or idea ? : )
thank you

[petyosi]

Yes, check this out and let me know if this works for you.

[shafa909]

@petyosi , this doesn't work for me, this is for my learning purpose. : ) and any other solutions please ... ! : )