How to make an infinite scroll with automatic content loading (React.js)?

Question

JavaScript

When the component is initialized, I have an ajax request in response, an array with ten objects comes in, for example, there are 10 of them.
And in the following way, in the component, I render the data to the page:

return (
  <div className="book">

    <table className="highlight">
      <thead>
      <tr>
        <th>Имя</th>
        <th>Город</th>
        <th>Номер телефона</th>
        <th/>
      </tr>
      </thead>

      <tbody>
      {
        books &&
        books.map((book) => {
          return (
            <tr key={book.pbnum}>
              <td>{book.pbfirstName} {book.pblastName}</td>
              <td>{book.pbcity}</td>
              <td>{book.pbphoneNumber}</td>
              <td/>
              <td>
                <Link
                  className="waves-effect waves-light btn"
                  to={`/book/${book._id}/edit?allow=true`}
                >Редактировать</Link>
              </td>
            </tr>
          )
        })
      }
      </tbody>
    </table>
  </div>
)

Then I have a function that fires if I scroll to the bottom of the page, and in this function I make an ajax request again, the next ten records come in the response, and so on.
Without react.js, I would use:
ParentNode.append()
https://developer.mozilla.org/ru/docs/Web/API/Pare...
In general, I would add html with new data to the end of the document with already loaded data .
How to correctly implement the same idea in the case of react. Those. keep the already rendered data and map the new data that comes in the ajax response when I scroll to the end of the document. As I described above, the scroll logic is described, ajax request and response, everything is there, you need to understand how to add data to existing ones.

Answer 1

this.setState(({ books }) => ({
  books: [ ...books, ...newBooks ],
}));