# Rendering a .vtu file using vtk-js with React

**URL:** https://discourse.vtk.org/t/rendering-a-vtu-file-using-vtk-js-with-react/13934
**Category:** Web
**Created:** [May 25, 2024, 5:00pm UTC](https://discourse.vtk.org/t/rendering-a-vtu-file-using-vtk-js-with-react/13934 "2024-05-25T17:00:45Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![iponisio](https://discourse.vtk.org/user_avatar/discourse.vtk.org/iponisio/32/8864_2.png) [@iponisio](https://discourse.vtk.org/u/iponisio)
#### Post date: [May 25, 2024, 5:00pm UTC](https://discourse.vtk.org/t/rendering-a-vtu-file-using-vtk-js-with-react/13934/1 "2024-05-25T17:00:45Z")

</div>

Hi,

I’m following [this tutorial](https://kitware.github.io/vtk-js/docs/vtk_react.html), slightly modifying it in the attempt to render a mesh we’ve created using _gmsh_ and converted into a _.vtu_ format.

I’ve got a pseudo-API running on localhost that serves statically the XML file as plain text. I’ve failed so far in finding a way to configure the data pipeline, in order for the React + vtk-js to properly render the mesh.

The code for the React app follows:

```auto
import { useState, useRef, useEffect } from 'react';

import '@kitware/vtk.js/Rendering/Profiles/Geometry';

import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';

import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';

import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader';

function App() {
  const vtkContainerRef = useRef(null);
  const context = useRef(null);
  const [representation, setRepresentation] = useState(2);

  useEffect(() => {
    if (!context.current) {
      const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        rootContainer: vtkContainerRef.current,
      });
      
      const renderer = fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();

      const reader = vtkXMLPolyDataReader.newInstance();
      reader.setUrl('http://localhost:8000/mesh');
      const polydata = reader.getOutputData();
      const mapper = vtkMapper.newInstance();
      mapper.setInputData(polydata);

      const actor = vtkActor.newInstance();
      actor.setMapper(mapper);
      renderer.addActor(actor);
      renderer.resetCamera();
      renderWindow.render();
        
      context.current = {
        fullScreenRenderer,
        renderWindow,
        renderer,
        polydata,
        actor,
        mapper,
      };
    }

    return () => {
      if (context.current) {
        const { fullScreenRenderer, actor, mapper } = context.current;
        actor.delete();
        mapper.delete();
        fullScreenRenderer.delete();
        context.current = null;
      }
    };
  }, [vtkContainerRef]);

  useEffect(() => {
    if (context.current) {
      const { renderWindow } = context.current;
      renderWindow.render();
    }
  }, [vtkContainerRef]);

  useEffect(() => {
    if (context.current) {
      const { actor, renderWindow } = context.current;
      actor.getProperty().setRepresentation(representation);
      renderWindow.render();
    }
  }, [representation]);

  return (
    <div>
      <div ref={vtkContainerRef} />
      <table
        style={{
          position: 'absolute',
          top: '25px',
          left: '25px',
          background: 'white',
          padding: '12px',
        }}
      >
        <tbody>
          <tr>
            <td>
              <select
                value={representation}
                style={{ width: '100%' }}
                onInput={(ev) => setRepresentation(Number(ev.target.value))}
              >
                <option value="0">Points</option>
                <option value="1">Wireframe</option>
                <option value="2">Surface</option>
              </select>
            </td>
          </tr>
          <tr>
            
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App;

```

Any hints would be greatly appreciated.  
Thanks in advance.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [May 26, 2024, 3:23pm UTC](https://discourse.vtk.org/t/rendering-a-vtu-file-using-vtk-js-with-react/13934/2 "2024-05-26T15:23:19Z")

</div>

`XMLPolyDataReader != XMLUnstructuredGridReader`

This topic has been covered many time along with paths to solve the limitation of vtk.js.

---

<div class="post-metadata">

### Author: ![iponisio](https://discourse.vtk.org/user_avatar/discourse.vtk.org/iponisio/32/8864_2.png) [@iponisio](https://discourse.vtk.org/u/iponisio)
#### Post date: [May 31, 2024, 11:18pm UTC](https://discourse.vtk.org/t/rendering-a-vtu-file-using-vtk-js-with-react/13934/3 "2024-05-31T23:18:53Z")

</div>

Thank you for your reply. I apologize for asking something that has been repeatedly addressed.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [January 2, 2025, 4:06pm UTC](https://discourse.vtk.org/t/rendering-a-vtu-file-using-vtk-js-with-react/13934/5 "2025-01-02T16:06:03Z")

</div>

@sridhar-mani please link the thread where we provided you with an answer. By posting the same question everywhere, you are diluting the information.