title: React and PDF.js changing page doesn't work when I render whole document
body: <p>I'm trying to render PDF file in my web application in React using <a href="https://mozilla.github.io/pdf.js/" rel="nofollow noreferrer">PDF.js</a> library. There is so much different information out there, even in the official git, so I'm stuck with trying to render the whole pdf document and also have the function to go to particular page. This is what I have for now:</p>
  
  <pre><code>import * as pdfWorker from 'pdfjs-dist/build/pdf.worker'
  import PdfJsLib from 'pdfjs-dist';
  import 'pdfjs-dist/web/pdf_viewer.css';
  import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
  
  ...
  
  componentDidMount() {
          let container = this.viewerContainer.current;
          let viewer = this.viewer.current;
  
          PdfJsLib.GlobalWorkerOptions.workerSrc = pdfWorker;
          PdfJsLib.getDocument(this.props.file).then((pdf) =&gt; {
  
              this.setState({numPages: pdf.numPages});
  
              this.pdfLinkService = new pdfjsViewer.PDFLinkService();
  
              this.pdfFindController = new pdfjsViewer.PDFFindController({
                  linkService: this.pdfLinkService,
              });
  
              this.pdfViewer = new pdfjsViewer.PDFViewer({
                   container,
                   viewer,
                   linkService: this.pdfLinkService,
                   findController: this.pdfFindController
              });
              this.pdfLinkService.setViewer(this.pdfViewer);
  
              this.pdfViewer.setDocument(pdf);
              this.pdfLinkService.setDocument(pdf, null);
  
              this.pdfViewer.onePageRendered.then(() =&gt; {
                   pdf.getOutline().then((outline) =&gt; {
                       this.outline = outline || null;
  
                       if (!outline) {
                          return;
                       }
                       this.setState({bookmarkItems: outline});
              });
         });
     });
  }
  
  
  
  ...
  
  onNextPageClick = () =&gt; {
      if(this.state.numPages &gt; this.state.pageNumber) {
          this.setState({pageNumber: this.state.pageNumber + 1});
          this.setState({pageNumberInput: this.state.pageNumber + 1});
  
          this.pdfViewer.currentPageNumber++;
      }
  }
  onPreviousPageClick = () =&gt; {
      if(this.state.pageNumber &gt; 1) {
          this.setState({pageNumber: this.state.pageNumber - 1});
          this.setState({pageNumberInput: this.state.pageNumber - 1});
  
          this.pdfViewer.currentPageNumber--;
      }
  }
  
  ...
  
  render() {
      return(
  
          ...
  
          &lt;div className="splitToolbarButton hiddenSmallView"&gt;
              &lt;button className="toolbarButton pageUp" title="Previous Page" id="previous" tabIndex="13" data-l10n-id="previous" onClick={this.onPreviousPageClick}&gt;
              &lt;span data-l10n-id="previous_label"&gt;Previous&lt;/span&gt;
              &lt;/button&gt;
           &lt;div className="splitToolbarButtonSeparator" /&gt;
              &lt;button className="toolbarButton pageDown" title="Next Page" id="next" tabIndex="14" data-l10n-id="next" onClick={this.onNextPageClick}&gt;
               &lt;span data-l10n-id="next_label"&gt;Next&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
  
           ...
  
          &lt;div id="viewerContainer" ref={this.viewerContainer}&gt;
              &lt;div id="viewer" ref={this.viewer} className="pdfViewer" /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>So with all this code I was able to render my pdf document in full but I'm having problem with jumping to particular page. The strange thing is that I can't jump to page only when I'm rendering my whole document with <code>new pdfjsViewer.PDFViewer</code>, but when I'm using <code>new pdfjsViewer.PDFSinglePageViewer</code> for rendering just one page at the time I can normally jump to page. So does anybody knows what am I missing, this is giving me a headache for weeks now? Thanks.</p>