react-infinite-scroll-component load more with array

Question

I'm trying to do an infinite scroll with my data that is an array. Most examples I see uses an API call and it got pages included on it but I'm having trouble doing it with just an array and values to set how many objects to load per scroll. Here's my code.

import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import InfiniteScroll from 'react-infinite-scroll-component'

const Scroll = ({ tweets }) => {
  const [allTweets, setAllTweets] = useState(tweets)
  const [hasMore, setHasmore] = useState(true)
  const [lastPosition, setLastPosition] = useState(0)
  const perPage = 4

  const loadProducts = () => {
    setTimeout(() => {
      setAllTweets(...allTweets, tweets.slice(lastPosition, lastPosition + perPage))
    }, 4000)

    setLastPosition(lastPosition + perPage)
  }

  useEffect(() => {
    loadProducts()
  }, [allTweets])

  return (
    <InfiniteScroll
      dataLength={allTweets.length}
      next={loadProducts}
      hasMore={hasMore}
      endMessage={
        <p style={{ textAlign: 'center' }}>
          <b>Yay! You have seen it all</b>
        </p>
      }
      loader={<h4>Loading...</h4>}
    >
      <div className="flex flex-col">
        {allTweets &&
          allTweets.slice(lastPosition, lastPosition + perPage).map((value, index) => {
            return <div className="py-10 px-5">{value.body}</div>
          })}
      </div>
    </InfiniteScroll>
  )
}

export default Scroll

jack.benson · Accepted Answer · 2020-11-06 17:03:01Z

I made a semi-functioning example of what I think you are trying to do. Note that this plugin only seems to work if you can scroll. If your content is not tall enough to force scrolling then new content will never be able to load:

App.js

import React from "react";
import Scroll from "./Scroll";

const App = () => {
  const initialTweets = [
    { body: "Body 1" },
    { body: "Body 2" },
    { body: "Body 3" },
    { body: "Body 4" },
    { body: "Body 5" },
    { body: "Body 6" },
    { body: "Body 7" },
    { body: "Body 8" },
    { body: "Body 9" },
    { body: "Body 10" }
  ];

  return (
    <div>
      <h1>demo: react-infinite-scroll-component</h1>
      <hr />
      <Scroll tweets={initialTweets} />
    </div>
  );
};

export default App;

Scroll.jsx

import React, { useCallback, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const Scroll = ({ tweets }) => {
  const [allTweets, setAllTweets] = useState(tweets);
  const [hasMore, setHasmore] = useState(true);
  const [lastPosition, setLastPosition] = useState(0);
  const perPage = 4;

  const loadProducts = useCallback(() => {
    setTimeout(() => {
      setAllTweets((prev) => [...prev, ...prev]);
    }, 2000);

    setLastPosition(lastPosition + perPage);
  }, []);

  console.log(allTweets);

  return (
    <InfiniteScroll
      dataLength={allTweets.length}
      next={loadProducts}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
    >
      <div className="flex flex-col">
        {allTweets.map((value, index) => (
          <div key={index} className="py-10 px-5">
            {value.body}
          </div>
        ))}
      </div>
    </InfiniteScroll>
  );
};

export default Scroll;

You'll need to tweak things to do exactly what you want, but this should point you in the right direction.

NOTE: To see this work in the codesandbox, either shrink the demo window so you can scroll or add a log more objects to the initialTweets array. Also, there are a number of examples you can find on the project's homepage.

Thank you for the idea!! I was able to make it work with this const perPage = 11; const [lastPosition, setLastPosition] = useState(perPage); const [allTweets, setAllTweets] = useState(tweets.slice(0, perPage)); const [hasMore, setHasmore] = useState(true); const loadProducts = () => { setTimeout(() => { setAllTweets((prev) => [...prev, ...tweets.slice(lastPosition, lastPosition + perPage)]); }, 4000); setLastPosition(lastPosition + perPage); };

Collectives™ on Stack Overflow

react-infinite-scroll-component load more with array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related