# Annotations not generating an element property on documents loaded after the first

**URL:** <https://pdfjs.community/t/annotations-not-generating-an-element-property-on-documents-loaded-after-the-first/2070>\
**Category:** Technical Support\
**Created:** [September 28, 2022, 10:49pm UTC](https://pdfjs.community/t/annotations-not-generating-an-element-property-on-documents-loaded-after-the-first/2070 "2022-09-28T22:49:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dale](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@dale](https://pdfjs.community/u/dale)\
**Post date:** [September 28, 2022, 10:49pm UTC](https://pdfjs.community/t/annotations-not-generating-an-element-property-on-documents-loaded-after-the-first/2070/1 "2022-09-28T22:49:02Z")

</div>

**Which product are you using?**  
PDF.js Express  
**PDF.js Express Version**  
8.7.0  
 →

**Detailed description of issue**  
Annotations generate properly on first render, but do not generate when a new document is loaded. Annotation values are generated with empty ‘element’ property, thus making them not appear on the PDF. A use hook is used to generated an array of stamps.

**Expected behaviour**  
It is expected that annotations will appear on document

**Does your issue happen with every document, or just one?**  
Issue happens on any document that isn’t the first document loaded.

**Link to document**  
Document agnostic

**Code snippet**  
const [viewInstance, setViewInstance] = useState();  
const { Annotations } = viewInstance ?? {};  
const { isLoading, data } = useGetDocument(props.document.DocumentId);  
const { annotationStamps } = useAnnotations(viewInstance, props.document);

```
const viewer = useRef(null);

useEffect(() => {
    WebViewer(
        {
            licenseKey: process.env.REACT_APP_PDFJS_LICENSE,
            path: '/webviewer/lib',
        },
        viewer.current,
    ).then((instance: typeof WebViewer) => {
        instance.UI.disableElements(['annotationCommentButton']);
        instance.UI.disableTools();
        instance.UI.disableElements(['annotationCommentButton']);
        instance.UI.disableElements(['pageNavOverlay']);
        instance.UI.disableElements(['eraserToolButton']);
        instance.UI.disableElements(['ribbons']);
        const { docViewer, Annotations } = instance;
        setViewInstance(instance);
        docViewer.addEventListener('documentLoaded', () => {
            // here you can get the document and perform actions on it,
            // such as removing pages
            console.log('document loaded');
        });
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
    if (isLoading || !data || !viewInstance) return;
    viewInstance.loadDocument(data, { filename: props.document.DocumentName });
    if (annotationStamps) {
        if (annotationStamps.length > 0) {
            annotationStamps.forEach((stamp: Core.Annotations.Annotation) => {
                console.log('Stamp', stamp);
                let annotationManager = viewInstance.Core.documentViewer.getAnnotationManager();
                annotationManager.addAnnotation(stamp);
            });
        }
    }
}, [data, viewInstance]);

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [September 28, 2022, 10:49pm UTC](https://pdfjs.community/t/annotations-not-generating-an-element-property-on-documents-loaded-after-the-first/2070/3 "2022-09-28T22:49:07Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Add annotation events](https://pdfjs.express/documentation/annotation/annotation-events.8)
- [Create annotations - Programmatically](https://pdfjs.express/documentation/annotation/create-annotations#programmatically)
- [Extract XFDF using the Express REST API - Example](https://pdfjs.express/documentation/utils/extract#example)

APIs:
- [UndefinedannotationsLoaded](https://pdfjs.express/api/namespaces.list.html#event:annotationsLoaded__anchor)
- [Core.Annotations.StampAnnotation - new StampAnnotation( [initializer])](https://pdfjs.express/api/Core.Annotations.StampAnnotation.html#StampAnnotation__anchor)
- [Core.Annotations.RotationUtils - PathCustomAnnotationRotationMixin()](https://pdfjs.express/api/Core.Annotations.RotationUtils.html#PathCustomAnnotationRotationMixin__anchor)

Forums:
- [How to add/update/delete annotations based on condition?](https://pdfjs.community/t/how-to-add-update-delete-annotations-based-on-condition/1950/1)
- [PDF is displayed without previous annotations](https://pdfjs.community/t/pdf-is-displayed-without-previous-annotations/1738/1)
- [Confirm output of trial form field merger](https://pdfjs.community/t/confirm-output-of-trial-form-field-merger/744/1)

  
  

Share how you are using PDF.js Express in your organization you could win a **$500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free**. Learn more [here](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![dale](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@dale](https://pdfjs.community/u/dale)\
**Post date:** [September 29, 2022, 7:36am UTC](https://pdfjs.community/t/annotations-not-generating-an-element-property-on-documents-loaded-after-the-first/2070/4 "2022-09-29T07:36:02Z")

</div>

It appears the createInnerElement is not being called subsequent times after a new document load.

---

<div class="post-metadata">

**Author:** ![dale](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@dale](https://pdfjs.community/u/dale)\
**Post date:** [September 29, 2022, 10:14am UTC](https://pdfjs.community/t/annotations-not-generating-an-element-property-on-documents-loaded-after-the-first/2070/5 "2022-09-29T10:14:06Z")

</div>

Solved by using a loaded state that is updated on the document loading event. Then placing the annotation generation in useEffect with the loaded dependecy. Check if loaded is true, then run annotations. If data is changed, set loaded to false.