title: PDFJS is not highlighting the searched text
body: <p>I am trying to implement search in my pdf page. I manage to add the text layer and can mark text with the mouse. But can't highlight it when search it for the search bar. This is what my code looks like:</p>
  <pre><code>import React, { useState } from 'react';
  import { Document, Page } from 'react-pdf';
  import &quot;react-pdf/dist/Page/AnnotationLayer.css&quot;;
  import { loadStripe } from '@stripe/stripe-js';
  import &quot;views/RiggsPDF.pdf&quot;;
  import * as pdfjsLib from 'pdfjs-dist';
  import './pdf.css';
  import './pdf_viewer.css';
  import  CognitoAuth  from &quot;cognito/index.js&quot;;
  import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
  import pdffile from &quot;./pdf.pdf&quot;;
  
  var myState = {
      pdf: null,
      currentPage: 1,
      zoom: 2,
      searchText: &quot;&quot;
  }
  
  var amount = 0
  
  var boughtPhysicalAmount = false
  
  async function goToPage(num) {
      myState.currentPage = num
      document.getElementById(&quot;current_page&quot;).value = num
      render(myState)
      window.scrollTo(0, 0)
  }
  
  let arrayResultPages = []
  let currentSearchPosition = 0
  
  async function searchText() {
  
    arrayResultPages = []
  
    var searchText = document.getElementById(&quot;searchtext&quot;).value
    searchText.replace(/\s+/g, '');
    searchText = searchText.toLowerCase()
  
  
  
  
      
      /*let ebook = String(window.location).split('/').slice(-1)[0];
      
      var loadingTask = pdfjsLib.getDocument(pdffile);
      loadingTask.promise.then(function (pdfDocument) {
        // Document loaded, specifying document for the viewer and
        // the (optional) linkService.
        pdfViewer.setDocument(pdfDocument);
  
        pdfLinkService.setDocument(pdfDocument, null);
      });*/
  
  
  
  
    var maxPages = myState.pdf._pdfInfo.numPages;
    console.log(&quot;pages summary &quot; + maxPages)
  
    for (var i = 1; i &lt;= maxPages; i++) {
    // for (var i = 1; i &lt;= 10; i++) {
        var page = await myState.pdf.getPage(i);
        var textContent = await page.getTextContent();
        textContent = textContent.items.map(function (s) { return s.str; }).join('').toLowerCase(); // value page text
        if (textContent.includes(searchText)) {
          arrayResultPages.push(i)
        }
      }
  
    if (arrayResultPages.length === 0) {
      console.log(&quot;\&quot;&quot;+searchText+&quot;\&quot;&quot; + &quot; is not found in the document&quot;)
    }
    else {
      console.log(arrayResultPages)
      let startPage = arrayResultPages[0]
      myState.currentPage = startPage
      document.getElementById(&quot;current_page&quot;).value = startPage
      myState.searchText = searchText
      render(myState)
    }
  }
  
  async function nextSearchResult() {
    if (currentSearchPosition &lt; arrayResultPages.length-1) {
      currentSearchPosition = currentSearchPosition + 1;
  
      let loadPage = arrayResultPages[currentSearchPosition]
      myState.currentPage = loadPage
      document.getElementById(&quot;current_page&quot;).value = loadPage
      render(myState)
    }
  }
  
  async function prevSearchResult() {
    if (currentSearchPosition &gt; 0) {
      currentSearchPosition = currentSearchPosition - 1;
  
      let loadPage = arrayResultPages[currentSearchPosition]
      myState.currentPage = loadPage
      document.getElementById(&quot;current_page&quot;).value = loadPage
      render(myState)
    }
  }
  
  // old function, would be refactoring furtherly.
  async function goToText() {
      var searchText = document.getElementById(&quot;searchtext&quot;).value
      searchText.replace(/\s+/g, '');
      var currentPage = myState.currentPage
      if(searchText) {
        console.log(searchText, currentPage)
      }
      searchText = searchText.toLowerCase()
      var maxPages = myState.pdf._pdfInfo.numPages;
      var countPromises = []; // collecting all page promises
      var pageNum = currentPage;
      for (var j = parseInt(currentPage) + 1; j &lt;= maxPages; j++) {
        var page = await myState.pdf.getPage(j);
  
        var txt = &quot;&quot;;
        var textContent = await page.getTextContent();
        textContent = textContent.items.map(function (s) { return s.str; }).join('').toLowerCase(); // value page text
        if (textContent.includes(searchText)) {
          // console.log(textContent)
          // console.log(searchText + &quot; -----&gt; &quot; + j)
          pageNum = j;
          break;
        }
      }
      myState.currentPage = pageNum
      document.getElementById(&quot;current_page&quot;).value = pageNum
      render(myState)
  }
  
  async function goToRef(ref) {
      var maxPages = myState.pdf._pdfInfo.numPages;
      var currentPage = ref.num/5
      var pageNum = 1;
      for (var j = parseInt(currentPage) + 1; j &lt;= maxPages; j++) {
        var page = await myState.pdf.getPage(j);
  
        var txt = &quot;&quot;;
        var textContent = await page.getTextContent();
        var pageRef = page._pageInfo.ref
        console.log(&quot;AREK&quot;, pageRef, ref)
        if (pageRef.num == ref.num) {
          console.log(&quot;AREK Found ref on page &quot; + j)
          pageNum = j;
          break;
        }
      }
      myState.currentPage = pageNum
      document.getElementById(&quot;current_page&quot;).value = pageNum
      render(myState)
  }
  
  
  function render(myState) {
      document.getElementById(&quot;pdf_renderer&quot;).remove();
      var container = document.getElementById(&quot;canvas_container&quot;);
      var canvas = document.createElement('canvas');
      var canvasStyle = {
      display: '0 auto',
            backgroundColor: '#FFFFFF',
  
      }
      canvas.id     = &quot;pdf_renderer&quot;;
      canvas.style.position = 'relative'
      container.appendChild(canvas);
      canvas.addEventListener(&quot;mousemove&quot;, (e) =&gt; {document.body.style.cursor  = 'auto'}, false);
  
      var ctx = canvas.getContext('2d');
  
      myState.pdf.getPage(myState.currentPage).then((page) =&gt; {
          console.log(page._pageInfo.ref)
          var viewport = page.getViewport({scale:myState.zoom});
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          page.render({
              canvasContext: ctx,
              viewport: viewport,
          }).promise.then(() =&gt; {
              return page.getTextContent();
          }).then((textContent) =&gt; {
              const textLayer = document.getElementsByClassName(&quot;textLayer&quot;)[0]
              
              const pdf_canvas = document.getElementById(&quot;pdf_renderer&quot;)
              const canvas_offset_top = pdf_canvas.offsetTop
              const canvas_offset_left = pdf_canvas.offsetLeft
              const canvas_height = pdf_canvas.height 
              const canvas_width = pdf_canvas.width
              textLayer.setAttribute('style', `left: ${canvas_offset_left}px; top: ${canvas_offset_top}px; height: ${canvas_height}px; width: ${canvas_width}px`)
  
              var eventBus = new pdfjsViewer.EventBus();
              var pdfLinkService = new pdfjsViewer.PDFLinkService({
                eventBus: eventBus,
              });
              var pdfFindController = new pdfjsViewer.PDFFindController({
                eventBus: eventBus,
                linkService: pdfLinkService,
              });
              var pdfViewer = new pdfjsViewer.PDFViewer({
                container: container,
                viewer: document.getElementsByClassName(&quot;textLayer&quot;)[0],
                eventBus: eventBus,
                linkService: pdfLinkService,
                findController: pdfFindController,
                scale: 2
              });
              pdfLinkService.setViewer(pdfViewer);
              pdfViewer.currentScaleValue = 2;
              if (searchText) {
                  pdfFindController.executeCommand(&quot;find&quot;, { query: searchText });
              }
  
              pdfjsLib.renderTextLayer({
                  textContent: textContent,
                  container: textLayer,
                  viewport: viewport,
                  textDivs: []
              })
          });
          setupAnnotations(page, viewport, canvas, ctx, myState.zoom)
      });
  
  
  }
  
    function setupAnnotations(page, viewport, canvas, ctx, zoom) {
      var canvasOffset = canvas.getBoundingClientRect();
      var promise = page.getAnnotations().then(function (annotationsData) {
        viewport = viewport.clone({
          dontFlip: true
        });
        for (var i = 0; i &lt; annotationsData.length; i++) {
          var annotation = annotationsData[i];
          console.log('AREK', annotation)
          if (!annotation || !('Link' == annotation.subtype)) {
            continue;
          }
  
          drawHyperLink(canvas, ctx, annotation, zoom, page.view)
  
          var linkText = &quot;Authorcode&quot;;
          var linkURL = &quot;http://www.authorcode.com&quot;;
          var linkX = 50;
          var linkY = 25;
          var linkWidth;
          var isLink = true;
  
  
          function drawHyperLink(canvas, ctx, annotation, zoom, viewport) {
              // check if supported
              if (canvas.getContext) {
                  ctx.font = 'px sans-serif';
                  ctx.fillStyle = &quot;#0000ff&quot;;
                  ctx.fillText(linkText, linkX, linkY);
                  linkWidth = ctx.measureText(linkText).width;
                  //ctx.beginPath();
                  //ctx.rect(annotation.rect[0], annotation.rect[1], annotation.rect[2] - annotation.rect[0], annotation.rect[3] - annotation.rect[1])
                  //ctx.stroke();
                  canvas.addEventListener(&quot;click&quot;, (e) =&gt; getCursorPosition(ctx.canvas, e, annotation.rect, annotation.url, zoom, viewport, annotation.dest), false);
                  canvas.addEventListener(&quot;mousemove&quot;, (e) =&gt; setCursor(ctx.canvas, e, annotation.rect, annotation.url, zoom, viewport), false);
              }
          }
  
          function getCursorPosition(canvas, event, rectLink, url, zoom, viewport, dest) {
              const rect = canvas.getBoundingClientRect()
              const x = event.clientX - rect.left
              const y = event.clientY - rect.top
              var linkX, linkY, linkWidth, linkHeight;
              linkX = rectLink[0] * zoom
              linkHeight = (rectLink[3] - rectLink[1]) * zoom
              linkY = ((viewport[3] - rectLink[1])) * zoom - linkHeight
              linkWidth = (rectLink[2] - rectLink[0]) * zoom
              if (x &gt;= linkX &amp;&amp; x &lt;= (linkX + linkWidth)
                      &amp;&amp; y &gt;= linkY &amp;&amp; y &lt;= (linkY + linkHeight)) {
                  if(dest) {
                      console.log('AREK', dest[0])
                      goToRef(dest[0])
                  }
                  else {
                  window.location = url; }
              }
          }
  
          function setCursor(canvas, event, rectLink, url, zoom, viewport) {
              const rect = canvas.getBoundingClientRect()
              const x = event.clientX - rect.left
              const y = event.clientY - rect.top
              var linkX, linkY, linkWidth, linkHeight;
              linkX = rectLink[0] * zoom
              linkHeight = (rectLink[3] - rectLink[1]) * zoom
              linkY = ((viewport[3] - rectLink[1])) * zoom - linkHeight
              linkWidth = (rectLink[2] - rectLink[0]) * zoom
              if (x &gt;= linkX &amp;&amp; x &lt;= (linkX + linkWidth)
                      &amp;&amp; y &gt;= linkY &amp;&amp; y &lt;= (linkY + linkHeight)) {
                  document.body.style.cursor = 'pointer'
              }
          }
        }
      });
      return promise;
    }
  
  
  function getEmail() {
    try {
    let user = (CognitoAuth.getCurrentUser())
    let email = '';
    let user_attributes = JSON.parse(user.storage['CognitoIdentityServiceProvider.3v6khmrs69c87vlmcipjcloi0c.'+user.username+'.userData'])['UserAttributes']
    for(var attribute in user_attributes) {
        console.log(user_attributes[attribute])
        if(user_attributes[attribute].Name == 'email') {
            email = user_attributes[attribute].Value
        }
    }
    return email
  }
  
    catch(ex) {
      window.location = '/profile-page#/profile-page'
    }
  }
  
  function getAccessToken() {
    try {
      let user = (CognitoAuth.getCurrentUser())
      return  user.storage['CognitoIdentityServiceProvider.3v6khmrs69c87vlmcipjcloi0c.'+user.username+'.idToken']
    } catch (ex) {
      window.location = '/profile-page#/profile-page'
    }
  }
  
  function Studentreader() {
      CognitoAuth.isAuthenticated()
  
      let ebook = String(window.location).split('/').slice(-1)[0];
      let email = getEmail();
      fetch(&quot;https://8wrro7by93.execute-api.us-east-1.amazonaws.com/ferret/charge/&quot;+email+&quot;&amp;&quot;+ebook)
        .then( res =&gt; res.text() )
        .then( data =&gt;  {
          console.log('data', data)
          let found = false
          if(data != 0){
              found = true
          }
          amount = data
          if(!found) {
            window.location = '/profile-page#/profile-page'
          } else {
            console.log()
            console.log(pdfjsLib.version)
            pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`
  
            function makeThumb(num, page) {
              // draw page to fit into 96x96 canvas
              var vp = page.getViewport({scale:myState.zoom});
              var canvas = document.createElement(&quot;canvas&quot;);
              canvas.width = canvas.height = 96;
              canvas.onclick = function() { goToPage(num); }
              var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
  
              return page.render({canvasContext: canvas.getContext(&quot;2d&quot;), viewport: page.getViewport({scale:scale})}).promise.then(function () {
                canvas.getContext(&quot;2d&quot;).font = &quot;20px Arial&quot;;
                canvas.getContext(&quot;2d&quot;).fillText(String(num), 10, 20);
                return canvas;
              });
            }
            let access_token = ''
            try {
                access_token = getAccessToken()
            } catch(error) {
              window.location = '/profile-page#/profile-page'
            }
            fetch('https://8wrro7by93.execute-api.us-east-1.amazonaws.com/ferret/ebook/'+ebook)
                .then((resp) =&gt; resp.json())
                .then((resp) =&gt; {
                    console.log('ebook ', resp)
                    pdfjsLib.getDocument(pdffile).promise.then(async function (doc) {
                      var pages = []; while (pages.length &lt; doc.numPages) {pages.push(pages.length + 1);
                        // create a div for each page and build a small canvas for it
                        let num = pages.length
                        // console.log(num)
                        var div = document.getElementById(&quot;preview&quot;);
                        let result = await doc.getPage(num).then((e) =&gt; makeThumb(num, e))
                          .then(function (canvas) {
                            div.appendChild(canvas);
                        });
                      }
                    }).catch(console.error);
                    const loadingTask = pdfjsLib.getDocument(pdffile);
  
                    loadingTask.promise.then(function(pdf) {
                        pdf.getOutline().then((outline) =&gt; {
                        console.log(outline)
                        });
                      console.log(pdf.getPageLabels().then(e=&gt;console.log(e)))
                      var previewbarPosition = 1;
                      myState.pdf = pdf;
                        document.getElementById(&quot;backToDashboard-bttn&quot;)
                        .addEventListener('click', (e) =&gt; {
                          // window.location = '/profile-page#/profile-page'
                          window.location = '/#/profile-page'
                        });
                        document.getElementById('zoom_in')
                        .addEventListener('click', (e) =&gt; {
                            if(myState.pdf == null) return;
                            myState.zoom += 0.5;
                            console.log('ZOOM', myState.zoom)
                            render(myState);
                        });
                        document.getElementById('zoom_out')
                        .addEventListener('click', (e) =&gt; {
                            if(myState.pdf == null) return;
                            if(myState.zoom &gt; 2)
                            myState.zoom -= 0.5;
                            console.log('ZOOM', myState.zoom)
                            render(myState);
                        });
                        // document.getElementById('go_previous')
                        document.getElementsByClassName('prevPage')[0]
                                .addEventListener('click', (e) =&gt; {
                                    if(myState.pdf == null
                                       || myState.currentPage == 1) return;
                                    myState.currentPage -= 1;
                                    document.getElementById(&quot;current_page&quot;)
                                            .value = myState.currentPage;
                                    render(myState);
                                });
                        // document.getElementById('go_next')
                        document.getElementsByClassName('nextPage')[0]
                                .addEventListener('click', (e) =&gt; {
                                    if(myState.pdf == null
                                       || myState.currentPage &gt; myState.pdf
                                                                       ._pdfInfo.numPages)
                                       return;
  
                                    myState.currentPage += 1;
                                    document.getElementById(&quot;current_page&quot;)
                                            .value = myState.currentPage;
                                    render(myState);
                        });
                                      //
                document.getElementById('slide-left')
                .addEventListener('click', (e) =&gt; {
                  console.log(document.getElementById('preview').style.width)
                  if (previewbarPosition === 1) {
  
                  }
                  else {
                    previewbarPosition = previewbarPosition + 80;
                    document.getElementById('preview').style.marginLeft = previewbarPosition + 'px';
                  }
              });
              document.getElementById('slide-right')
                .addEventListener('click', (e) =&gt; {
                  // console.log(&quot;goto &quot;)
                  previewbarPosition = previewbarPosition - 80;
                  document.getElementById('preview').style.marginLeft = previewbarPosition + 'px';
              });
              document.getElementById('range-control')
                .addEventListener('change', (e) =&gt; {
                  console.log(&quot;goto &quot; + e.target.value)
                  switch (e.target.value) {
                    case &quot;1&quot;:
                      previewbarPosition = 1;
                    break;
                    case &quot;100&quot;:
                      previewbarPosition = -7999;
                    break;
                    case &quot;200&quot;:
                      previewbarPosition = -15998;
                    break;
                    case &quot;300&quot;:
                      previewbarPosition = -23997;
                      // previewbarPosition = -28797;
                    break;
                    case &quot;400&quot;:
                      previewbarPosition = -31996;
                      // previewbarPosition = -38396;
                    break;
                    case &quot;500&quot;:
                      previewbarPosition = -39995;
                    break;
                    case &quot;600&quot;:
                      previewbarPosition = -47994;
                    break;
  
                    default:
                      console.log(&quot;something wrong with range-control switch and arg was: &quot; + e.target.value)
                  }
                  document.getElementById('preview').style.marginLeft = previewbarPosition + 'px';
              });
                        document.getElementById('current_page')
                        .addEventListener('keypress', (e) =&gt; {
                            if(myState.pdf == null) return;
  
                            // Get key code
                            var code = (e.keyCode ? e.keyCode : e.which);
  
                            // If key code matches that of the Enter key
                            if(code == 13) {
                                var desiredPage =
                                        document.getElementById('current_page')
                                                .valueAsNumber;
  
                                if(desiredPage &gt;= 1
                                   &amp;&amp; desiredPage &lt;= myState.pdf
                                                            ._pdfInfo.numPages) {
                                        myState.currentPage = desiredPage;
                                        document.getElementById(&quot;current_page&quot;)
                                                .value = desiredPage;
                                        render(myState);
                                }
                            }
                        });
                      render(myState);
                    })
                    })
  
  
              }
            }).catch(() =&gt; window.location = &quot;/profile-page#/profile-page&quot;)
    const [numPages, setNumPages] = useState(null);
    const [pageNumber, setPageNumber] = useState(1);
      // more code here
      var canvasStyle = {
      display: '0 auto',
            backgroundColor: '#abeef7',
                  verticalAlign: 'bottom',
  
            position: 'relative'
  
      }
  
  
      var style =  {
        verticalAlign: 'top',
        backgroundColor: '#2c2c2c',
        width: '100%',
        color: 'white',
        textAlign: 'center',
          position:'relative',
          width:'100%',
          minWidth:'315px'
      }
  
      var buttonsLeft = {
          position:'absolute',
          top:'0px',
          left:'0px',
          height:'40px',
          width:'400px',display: 'inline-block',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
      }
  
      var buttonsRight = {
      position:'absolute',
      top:'0px',
      right:'0px',
      height:'40px',
      width:'350px',display: 'inline-block',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
      }
  
      var buttonsCenter = {
      height:'40px',
      width:'200px',
      margin:'0px auto',display: 'inline-block',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
      }
    return (
      &lt;div id=&quot;my_pdf_viewer&quot; &gt;
          &lt;div id=&quot;navigation_controls&quot; style={style}&gt;
  
            &lt;div className=&quot;navigation_button_block&quot;&gt;
              &lt;div className=&quot;navigation_button&quot;&gt;
                &lt;div className=&quot;backToDashboard&quot; id=&quot;backToDashboard-bttn&quot;&gt;
                  Back to Dashboard
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;navigation_button_block&quot;&gt;
              &lt;input id=&quot;current_page&quot; className=&quot;toolbarField pageNumber&quot; placeholder={1} type=&quot;number&quot;/&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;navigation_button_block&quot;&gt;
              &lt;div className=&quot;navigation_button&quot;&gt;
                &lt;div className=&quot;label&quot;&gt;Previous Page&lt;/div&gt;
                &lt;div className=&quot;navIcon prevPage&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;navigation_button&quot;&gt;
                &lt;div className=&quot;label&quot;&gt;Next Page&lt;/div&gt;
                &lt;div className=&quot;navIcon nextPage&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;navigation_button&quot;&gt;
                &lt;div className=&quot;label&quot;&gt;Last Location&lt;/div&gt;
                &lt;div className=&quot;navIcon lastPage&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;navigation_button_block&quot;&gt;
              &lt;div className=&quot;navigation_button&quot; id=&quot;zoom_in&quot;&gt;
                &lt;div className=&quot;label&quot;&gt;Zoom In&lt;/div&gt;
                &lt;div className=&quot;navIcon zoomIn&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;navigation_button&quot; id=&quot;zoom_out&quot;&gt;
                &lt;div className=&quot;label&quot;&gt;Zoom Out&lt;/div&gt;
                &lt;div className=&quot;navIcon zoomOut&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;navigation_button_block&quot;&gt;
              &lt;input id='searchtext' type=&quot;text&quot; className=&quot;toolbarField&quot; placeholder=&quot;Search&quot;&gt;&lt;/input&gt;
              {/* &lt;div className=&quot;navigation_button searchBttn&quot; onClick={goToText}&gt;&lt;/div&gt; */}
              &lt;div className=&quot;navigation_button searchBttn&quot; onClick={searchText}&gt;&lt;/div&gt;
  
              &lt;div className=&quot;navigation_button searchBttn&quot; onClick={prevSearchResult}&gt;prev&lt;/div&gt;
              &lt;div className=&quot;navigation_button searchBttn&quot; onClick={nextSearchResult}&gt;next&lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id=&quot;canvas_container&quot; style={canvasStyle}&gt;
            &lt;canvas id=&quot;pdf_renderer&quot;&gt;&lt;/canvas&gt;
            &lt;div className=&quot;textLayer&quot;&gt;&lt;/div&gt;
            &lt;div id=&quot;preview-step-controller&quot;&gt;
              &lt;label htmlFor=&quot;cars&quot;&gt;Choose range:&lt;/label&gt;
              &lt;select name=&quot;preview-range&quot; id=&quot;range-control&quot;&gt;
                &lt;option value=&quot;1&quot;&gt;1-100&lt;/option&gt;
                &lt;option value=&quot;100&quot;&gt;101-200&lt;/option&gt;
                &lt;option value=&quot;200&quot;&gt;201-300&lt;/option&gt;
                &lt;option value=&quot;300&quot;&gt;301-400&lt;/option&gt;
                &lt;option value=&quot;400&quot;&gt;401-500&lt;/option&gt;
                &lt;option value=&quot;500&quot;&gt;501-600&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;preview-wrapper&quot;&gt;
            &lt;div id=&quot;preview&quot;&gt;&lt;/div&gt;
            &lt;div id=&quot;slide-left&quot;&gt;&lt;/div&gt;
            &lt;div id=&quot;slide-right&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
     );
  }
  export default Studentreader;
  </code></pre>
  <p>The functions that I think is the problem is the <code>render</code>. I tried all the examples from the official documentation in github and everything around stackoverflow. Literaly. Can someone check and tell me what am I doing wrong ? This became mission impossible. Thank you in advance!</p>