Class property not being updated

[aldogarciaglez]

Hi,

When I try to set property class, it is working from the event handler scope, but when I try to retrieve the value from a different function, it is always returning empty. I have the following React component for MS Teams:

export const ConfigMathTabConfig = () => {

    const [{ inTeams, theme, context }] = useTeams({});
    const [ mathOperator, setMathOperator ] = useState<string>("");

    useEffect(() => {
        if (context) {

            setCustomSetting(context.entityId);

            setMathOperator(context.entityId.replace("MathPage", ""));

            microsoftTeams.settings.registerOnSaveHandler((saveEvent: microsoftTeams.settings.SaveEvent) => {
                const host = "https://" + window.location.host;
                let value: string = mathOperator as string; /// PROPERTY ALWAYS RETURNING EMPTY
                microsoftTeams.settings.setSettings({
                    contentUrl: host + "/configMathTab/?data=",
                    suggestedDisplayName: "Config Math Tab",
                    removeUrl: host + "/configMathTab/remove.html",
                    entityId: value
                });
                saveEvent.notifySuccess();
            });

            microsoftTeams.settings.setValidityState(true);
            microsoftTeams.appInitialization.notifySuccess();
        }
    }, [context]);

    const handleOnSelectedChange = (event, props: DropdownProps): void => {
        setMathOperator((props.value) ? props.value.toString() : "add"); /// PROPERTY BEING SET
    }

    return (
        <Provider theme={teamsTheme}>
            <Flex gap="gap.smaller" style={{ height: "300px" }}>
                <Dropdown placeholder="Select the math operator"
                    items={[ "add", "substract", "multiply", "divide" ]} onChange={handleOnSelectedChange}></Dropdown>
            </Flex>
        </Provider>
    );
};

I have been trying to look for any documentation about accessing and retrieving properties from event handlers and MS Teams SDK functions, but I cannot find anything related to what I am doing.

Please advise about what item/component I am missing

[wictorwilen]

That is a correct observation and issue we've stumbled upon as well. The Teams JS SDK callbacks doesn't have access to the context of the functional app. However this has been resolved in the latest release of the Yo teams generator. Download v3 of to teams and scaffold a project with a Tab and you'll see how to work around it using a useRef hook.

[aldogarciaglez]

Thanks @wictorwilen!

I will take a look to check about tis solution