App.js

import React, { Component } from 'react'
import ReactPDF from 'react-pdf'

class App extends Component {
  state = {
    pageIndex: null,
    pageNumber: null,
    total: null
  }

  onFileChange = (event) => {
    this.setState({
      file: event.target.files[0]
    })
  }

  onButtonClick = async (event) => {
    const res = await window.fetch('http://localhost:3001/api/pdf')
    const blob = await res.blob()
    const url = window.URL.createObjectURL(blob)

    this.setState({ file: url })
  }

  onDocumentLoad = ({ total }) => {
    this.setState({ total })
  }

  onPageLoad = ({ pageIndex, pageNumber }) => {
    this.setState({ pageIndex, pageNumber })
  }

  changePage(by) {
    this.setState(prevState => ({
      pageIndex: prevState.pageIndex + by
    }))
  }

  render() {
    const { file, pageIndex, pageNumber, total } = this.state

    return (
      <div className='Example'>
        <h1>react-pdf sample page</h1>
        <div className='Example__container'>
          <div className='Example__container__load'>
            <label htmlFor='file'>Load from file:</label>&nbsp;
            <input
              type='file'
              onChange={this.onFileChange}
            />
          </div>
          <div className='Example__container__preview'>
            <ReactPDF
              file={file}
              onDocumentLoad={this.onDocumentLoad}
              onPageLoad={this.onPageLoad}
              pageIndex={pageIndex}
              width={300}
            />
          </div>
          <div className='Example__container__controls'>
            <button
              disabled={pageNumber <= 1}
              onClick={() => this.changePage(-1)}
            >
              Previous
            </button>
            <span>Page {pageNumber || '--'} of {total || '--'}</span>
            <button
              disabled={pageNumber >= total}
              onClick={() => this.changePage(1)}
            >
              Next
            </button>
            <button onClick={this.onButtonClick}>lul</button>
          </div>
        </div>
      </div>
    )
  }
}

export default App

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <App />,
  document.getElementById('root')
)