Как правильно сделать бесконечный скролл с автоматической загрузкой контента (React.j

[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 запрос и ответ, всё есть, нужно понимание как добавлять данные к существующим.

[SuperZen]

import React from 'react'

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      data: []
    }

    this.genData = this.genData.bind(this)
  }

  genData() {
    this.setState(currentData => ({
      ...currentData,
      data: [
        ...currentData.data,
        ...Array
          .from({ length: 10 }, (_, id) =>
            ({
              id: id + this.state.data.length,
              value: Math.random() * 100
            })
          )
      ]
    }))
  }

  componentDidMount() {
    this.genData()
  }

  render() {
    return <React.Fragment>
      {this.state.data.map(({ id, value }) => <div key={id}>{value}</div>)}
      <button onClick={this.genData}>load more</button>
    </React.Fragment>
  }
}
export default App