react infinite scroll component table body

Question

Is there any way to use react infinite scroll component package in the "Table" ? https://www.npmjs.com/package/react-infinite-scroll-component Here is my code.

<table className="table table-sm table-dark table-striped table-hover">
              <thead className="">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Type</th>
                  <th scope="col">Object</th>
                  <th scope="col">Url</th>
                  <th scope="col">Ip</th>
                  <th scope="col">Detail</th>
                </tr>
              </thead>
              <tbody>
                <InfiniteScroll
                  dataLength={logs.list.length} //This is important field to render the next data
                  next={fetchData}
                  hasMore={logs.hasMore}
                  loader={<h4>Loading...</h4>}
                  endMessage={
                    <p style={{ textAlign: "center" }}>
                      <b>Yay! You have seen it all</b>
                    </p>
                  }
                >
                  {logs.list.map((l, i) => {
                    return (
                      <tr key={l.id}>
                        <th scope="row">{l.id}</th>
                        <td>{l.key}</td>
                        <td>{l.object}</td>
                        <td>{l.url}</td>
                        <td>{l.ip}</td>
                        <td>----</td>
                      </tr>
                    );
                  })}
                </InfiniteScroll>
              </tbody>
            </table>

Answer 1

Yes, you just need to move the <InfiniteScroll> outward to wrap the whole <table>, as opposed to having it inside the <tbody>. Otherwise, when it renders your loading message, you'll end up with invalid DOM nesting.