React: Unable to get updated state(value) in grapesjs event callback function

[riteshagarwalsw]

I am facing an issue while integrating grapesjs with react.
I have a state in react component as below(Function component)

const [fileName, setFileName] = React.useState<string>('Default');

// versions
React version: 16.8.6
GrapesJS version: 0.17.19

Once the file name is changed by the user, using setFileName, I would like grapesjs to have access to the updated fileName.
Below example does not work.

editor.on('component:selected', () => {            
            console.log(fileName);            
        });

Above code always prints "Default" as the file name. Although fineName is changed by the user(And react code is able to see the changes). But grapesjs code is not able to access the latest changes in fileName(It always gets the default value).

Please help me with some direction. I am stuck with this.

[artf]

This is how React hooks work, you should learn how to handle them properly.

[riteshagarwalsw]

@artf I did find a solution. For any registered event, if a state change is detected, I turned the event OFF and then back ON. This ensured that the latest data is available when the event gets triggered.