[darktowerk56c]

Всем привет, подскажите, пожалуйста, как реализовать следующее:
При инициализации компонента у меня происходит ajax запрос в ответе приходит массив с десятью объектами, например их 10.
И следующим образом в компоненте я рендерю данные на страницу:

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>
)

Затем у меня есть функция, которая срабатывает в случае если я доскроллил до низа страница, и в этой функции я делаю снова ajax запрос, в ответе приходит следующие десять записей и так далее.
Без react.js я использовал бы:
ParentNode.append()
https://developer.mozilla.org/ru/doc...entNode/append
В общаем добавлял бы html с новыми данными в конец документа уже загруженным данным.
Как правильно реализовать ту же идею в случае с react. Т.е. оставлять уже отредеренные данные и map новые данные, которые приходят в ответе ajax, когда я доскроллил до конца документа. Как я выше описал логика скролла описана, ajax запрос и ответ, всё есть, нужно понимание как добавлять данные к существующим.