# On key press, cannot read 'getViewportByReference' of undefined

**URL:** https://discourse.vtk.org/t/on-key-press-cannot-read-getviewportbyreference-of-undefined/6233
**Category:** Web
**Created:** [July 23, 2021, 7:37pm UTC](https://discourse.vtk.org/t/on-key-press-cannot-read-getviewportbyreference-of-undefined/6233 "2021-07-23T19:37:18Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Nicolas\_Schmidt](https://discourse.vtk.org/user_avatar/discourse.vtk.org/nicolas_schmidt/32/3681_2.png) [@Nicolas\_Schmidt](https://discourse.vtk.org/u/Nicolas_Schmidt)
#### Post date: [July 23, 2021, 7:37pm UTC](https://discourse.vtk.org/t/on-key-press-cannot-read-getviewportbyreference-of-undefined/6233/1 "2021-07-23T19:37:18Z")

</div>

I am implementing a simulation results viewer within a react app and am really liking vtk.js so far. At the moment I’m running into an error and hoping to get a little assistance.

I was using vtkFullScreenRenderer, but getting a “No Input” error so I followed [this discourse post](https://discourse.vtk.org/t/vtk-js-no-input-error/5505/2) and have resolved that error.

Of course now I have another error! 😀

On key down I get the following:

```auto
Uncaught TypeError: Cannot read property 'getViewportByReference' of undefined
    at Object.publicAPI.isInViewport (:3000/static/js/0.chunk.js:339169)
    at Object.publicAPI.findPokedRenderer (:3000/static/js/0.chunk.js:328849)
    at updateCurrentRenderer (:3000/static/js/0.chunk.js:328274)
    at Object.publicAPI.getCurrentRenderer (:3000/static/js/0.chunk.js:328283)
    at Object.publicAPI.<computed> [as keyDownEvent] (:3000/static/js/0.chunk.js:328909)
    at HTMLDocument.publicAPI.handleKeyDown (:3000/static/js/0.chunk.js:328404)

```

I’m following the code in the discourse post I linked to above, but on reflection, the main difference is I’m not creating a new div but using a ref as the container. Could that have something to do with the error?

For reference here is that code:

```auto

const renderWindowSetup = (container: HTMLDivElement) => {

  // Standard rendering code setup
  const renderWindow = vtkRenderWindow.newInstance();
  const renderer = vtkRenderer.newInstance({ });
  renderer.setBackgroundFrom([0.0,0.0,0.0,0.0])
  
  renderWindow.addRenderer(renderer);

  // Use OpenGL as the backend to view the all this
  const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
  renderWindow.addView(openglRenderWindow);

  openglRenderWindow.setContainer(container);

  // Capture size of the container and set it to the renderWindow
  const { width, height } = container.getBoundingClientRect();
  openglRenderWindow.setSize(width, height);

  // Setup an interactor to handle mouse events
  const interactor = vtkRenderWindowInteractor.newInstance()
  interactor.setInteractorStyle(
    vtkInteractorStyleTrackballCamera.newInstance()
    );
  interactor.setView(openglRenderWindow)
  interactor.initialize()
  interactor.bindEvents(container)

  return {renderer, renderWindow, interactor}
}

```

Thanks in advance!

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [July 23, 2021, 8:38pm UTC](https://discourse.vtk.org/t/on-key-press-cannot-read-getviewportbyreference-of-undefined/6233/2 "2021-07-23T20:38:29Z")

</div>

Hi, I’m not immediately seeing an issue with your code. Do you happen to have a minimal reproducible example, and if it can be made public, could you put it on [codesandbox.io](http://codesandbox.io)?

For context, what I’m guessing is that somehow the internally stored vtkRenderer is undefined, meaning that an invalid value was somehow added to the renderer list.

---

<div class="post-metadata">

### Author: ![Nicolas\_Schmidt](https://discourse.vtk.org/user_avatar/discourse.vtk.org/nicolas_schmidt/32/3681_2.png) [@Nicolas\_Schmidt](https://discourse.vtk.org/u/Nicolas_Schmidt)
#### Post date: [July 23, 2021, 10:04pm UTC](https://discourse.vtk.org/t/on-key-press-cannot-read-getviewportbyreference-of-undefined/6233/3 "2021-07-23T22:04:24Z")

</div>

Thanks so much for your reply Forrest, it helped me find the solution. I created a minimal example, but the issue wasn’t reproduced.

Turns out as I loaded the file, my component was re-rendering and I was “cleaning up” the renderer et al prematurely [following the function returned by useEffect in this example.](https://kitware.github.io/vtk-js/docs/vtk_react.html)

So more of a react problem than a vtk.js problem. Thanks!

---

<div class="post-metadata">

### Author: ![Nicolas\_Schmidt](https://discourse.vtk.org/user_avatar/discourse.vtk.org/nicolas_schmidt/32/3681_2.png) [@Nicolas\_Schmidt](https://discourse.vtk.org/u/Nicolas_Schmidt)
#### Post date: [July 27, 2021, 6:53pm UTC](https://discourse.vtk.org/t/on-key-press-cannot-read-getviewportbyreference-of-undefined/6233/4 "2021-07-27T18:53:44Z")

</div>

@Forrest in case you or others would find it useful, here’s a pretty minimal react-vtk example.

> **[react-vtk - CodeSandbox](https://codesandbox.io/s/react-vtk-4l0s8?file=%2Fsrc%2FApp.js)**
>
> react-vtk by NGimbal using @kitware/vtk.js, react, react-dom, react-scripts