# Two instances of WebViewer were created on the same HTML element ( React App)

**URL:** <https://pdfjs.community/t/two-instances-of-webviewer-were-created-on-the-same-html-element-react-app/679>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [April 2, 2021, 8:50pm UTC](https://pdfjs.community/t/two-instances-of-webviewer-were-created-on-the-same-html-element-react-app/679 "2021-04-02T20:50:50Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![giacomocochetti90](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@giacomocochetti90](https://pdfjs.community/u/giacomocochetti90)\
**Post date:** [April 2, 2021, 8:50pm UTC](https://pdfjs.community/t/two-instances-of-webviewer-were-created-on-the-same-html-element-react-app/679/1 "2021-04-02T20:50:50Z")

</div>

**PDF.js Express Version**

**Detailed description of issue**  
Hi Guys, I’m trying to embed this pdf viewer in a React App, but i’m getting this error when I try to change the path of the pdf inside the useEffect(), with a dynamic variable passed through props. The initial document on the first click is getting rendered correctly, but then if I try to click on another one I have this crash. I have tried to use instance.loadDocument(`lib/pdf/${filePath}`) but I’m getting an error: “pdf header error”. What shall I do here? Thanks for any help I will get 🙂

**Expected behaviour**  
The pdf should change according to the filepath passed wihout any errors

**Does your issue happen with every document, or just one?**  
Every document

**Link to document**

**Code snippet**  
const App = ({filePath}) =\> {

const viewer = useRef(null);

useEffect(() =\> {

```
WebViewer(

  {

    path: 'lib',

    initialDoc: `lib/pdf/${filePath}`,

  },

  viewer.current

).then((instance) => {

  const { docViewer, Annotations } = instance;

  const annotManager = docViewer.getAnnotationManager();

  setInstance(instance)

       

  docViewer.on('documentLoaded', () => {

    const rectangleAnnot = new Annotations.RectangleAnnotation();

    rectangleAnnot.PageNumber = 1;

   

    rectangleAnnot.X = 100;

    rectangleAnnot.Y = 150;

    rectangleAnnot.Width = 200;

    rectangleAnnot.Height = 50;

    rectangleAnnot.Author = annotManager.getCurrentUser();

    annotManager.addAnnotation(rectangleAnnot);

    annotManager.redrawAnnotation(rectangleAnnot);

  });

});

```

}, [filePath]);

return (

```
<div className="App">

  <div className="header">React sample</div>

  <div className="webviewer" ref={viewer}></div>

</div>

```

);

};

export default App;

---

_[View the full topic](https://pdfjs.community/t/two-instances-of-webviewer-were-created-on-the-same-html-element-react-app/679)._