next prop not working in react-infinite-scroll-component

Question

The infinite scroll component is in a table and its inside a scrollable page. i tried giving id="scrollableDiv" to every div in the page and also <html> in index.html still no use. when i remove the scrollableTarget="scrollableDiv" the fetchdata works untill the parent scroll bar in the bottom. after that fetchData function not working. when i forcefully scroll the parent scroll fetchdata works.

But i want it to work on scrolling the table. Not when scrolling the parent(i mean the whole page), anyone tell me where should i assingn id="scrollableDiv". There is no div with height specified

Here is the code,

  const fetchMoreData = () => {
console.log("new more data");
const temp = [...ingestStats];
setTimeout(() => {
  setIngestStats((prev) => prev.concat(temp));
}, 1500);};

           <div className="row">
            <div className="col-xl-12">
              <div className="card dashboard-table">
                {/* /.card-header */}
                <div className="card-body p-0" id="collapse1">
                  <InfiniteScroll
                    dataLength={ingestStats.length}
                    next={fetchMoreData}
                    hasMore={ingestStats.length < 40 ? true : false}
                    loader={
                      <p style={{ textAlign: "center" }}>
                        <b>Loading...</b>
                      </p>
                    }
                    endMessage={
                      <p style={{ textAlign: "center" }}>
                        <b>Yay! You have seen it all</b>
                      </p>
                    }
                    scrollableTarget="scrollableDiv"
                  >
                    <table className="table table-hover table-borderless  text-center table-sm table-responsive">
                      <thead>
                        <tr>
                          <th>Activity</th>
                          <th>
                            Time Stamp{" "}
                            <span href="#0">
                              <i className="fas fa-angle-down" />
                            </span>
                          </th>
                          <th>
                            Status{" "}
                            <span href="#0">
                              <i className="fas fa-angle-down" />
                            </span>
                          </th>
                        </tr>
                      </thead>

                      <tbody>
                        {ingestStats &&
                          ingestStats.map((item, index) => (
                            <tr key={`${item.time}-${index}`}>
                              <td>{item.activity}</td>
                              <td>{item.time}</td>
                              <td>
                                {item.isActive ? (
                                  <span className="status-success">
                                    Success
                                  </span>
                                ) : (
                                  <span className="status-failed">
                                    Success
                                  </span>
                                )}
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </table>
                  </InfiniteScroll>
                </div>
                {/* /.card-body */}
              </div>
            </div>
          </div>

try adding to your InfiniteScroll something like height={200} — Timothy Jeffcoat, Jan 27 '22 at 16:22

score 2 · Answer 1 · answered Nov 20 '22 at 15:03

I was encountering a similar problem where the infinitescroll element would take the whole window in order to scroll... However, there is a small fix for this. You actually just need to add 'height' to the InfiniteScroll element and all your problems will be gone. That is the reason why it won't trigger your fetch data. See down for an example:

const [fetchIsLoading, setFetchIsLoading] = useState(false);
const [contacts, setContacts] = useState([]);

    const loadMoreData = () => {

        if (fetchIsLoading) {
         return;
        }

       setFetchIsLoading(true);
       fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
         .then((res) => res.json())
         .then((body) => {
           setContacts([...contacts, ...body.results]);
           setFetchIsLoading(false);
         })
         .catch(() => {
           setFetchIsLoading(false);
         });
      };

      useEffect(() => {
        loadMoreData();
      }, []);

<div  // < ------------- top level div with id 'scrollableDiv' is not even needed... but it works (if you use it or not)
      // id="scrollableDiv"
      // style={{height: 400}}
    >
      <InfiniteScroll style={{
        // height: 400      <-------- this does not work!
      }}
        dataLength={contacts.length}
        next={loadMoreData}
        hasMore={true}//contacts.length < 15
        loader={
          <Skeleton
            avatar
            paragraph={{
              rows: 1,
            }}
            active
          />
        }
        height={400} //    <--------- however, this works through the way this infinite scroll is set up.
        endMessage={<Divider plain>It is all, nothing more </Divider>}
        //scrollableTarget="scrollableDiv" <-------- this is not even needed the way this infinite scroll is set up. Even though you point it to the top level div it works either way...
      >
        <List
          dataSource={contacts}
          renderItem={(item) => (
            <List.Item key={item.email}>
              <List.Item.Meta
                avatar={<Avatar src={item.picture.large} />}
                title={<div style={{ color: '#54BEC6', cursor: 'pointer' }}>{item.name.last}</div>}
                description={item.email}
                onClick={(event) => onClickContactsTab(event, item.name.last)}
              />
              {
                // Use this section to put extra information about the user
                //<div>Extra info?</div>
              }
              
            </List.Item>
          )}
        />
      </InfiniteScroll>
    </div>

next prop not working in react-infinite-scroll-component

1 Answers1