StatefulButton update function for Toggle

Hi, I am trying to build a StatefulButton to show/hide annotation. I have followed this documentation

Here is my code snippet

const [toggle, setToggle] = useState(true);
.
.
instance.setHeaderItems(header => {
                header.push({
                    type: "statefulButton",
                    initialState: "Show",
                    states: {
                        Show: {
                            img: SHOW_ANNOTATIONS_ICON,
                            onClick: (update: any, activeState: any) => {
                                setToggle(!toggle);
                                let AllAnnotations = instance.annotManager.getAnnotationsList();
                                instance.annotManager.showAnnotations(AllAnnotations);
                                console.info("show", activeState);
                                update();
                            },
                        },
                        Hide: {
                            img: HIDE_ANNOTATIONS_ICON,
                            onClick: (update: any, activeState: any) => {
                                setToggle(!toggle);
                                let AllAnnotations = instance.annotManager.getAnnotationsList();
                                instance.annotManager.hideAnnotations(AllAnnotations);
                                console.info("hide", activeState);
                                update();
                            },
                        }
                    },
                    mount: (update: any) => {
                        const isToggledState = (toggle: any) => {
                            console.info("toggle", toggle);
                            if(toggle == true){
                                return 'Hide';
                            }
                            else if(toggle == false){
                                return 'Show';
                            }
                        }
                        instance.docViewer.on('click', (toggle: any) => {
                            update(isToggledState(toggle));
                          });
                      },
                      unmount: () => {
                        instance.docViewer.off();
                      },
                    dataElement: 'showAnnotationButton'
                });
            });

The activeState is Returning the svg icon img. And mount is never called. I tried using ‘click’ event handler for updating toggle state. Can you please suggest how to use the update function here to change between the two states?

Thanks

Hello, I’m Ron, an automated tech support bot :robot:

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

Guides:APIs:Forums:

Hello,
I check this code, you can just use onClick decide the buttonStatus, rather using mount.
Here is the code snippet you can reference:

instance.setHeaderItems(header => {
        header.push({
            type: "statefulButton",
            initialState: "Show",
            states: {
                Show: {
                    img: SHOW_ANNOTATIONS_ICON,
                    onClick: (update) => {
                      let AllAnnotations = instance.annotManager.getAnnotationsList();
                      instance.annotManager.showAnnotations(AllAnnotations);
                      update('Hide') 
                    },
                },
                Hide: {
                  img: HIDE_ANNOTATIONS_ICON,
                  onClick: (update) => {
                    let AllAnnotations = instance.annotManager.getAnnotationsList();
                    instance.annotManager.showAnnotations(AllAnnotations);
                    update('Show') 
                  }
                }
            },
            dataElement: 'showAnnotationButton'
        });
      });

Let me know if you need more help