Canvas with additionalActions do not change the state

[bastiW]

Hi all,

Goal: I want to toggle an info on the additionalActions button on the canvas.
Current behaviour: The the state of showInfo changes once. Clicking it again does not change it.

Should work: It should always change the state on button click

Anyone knows how I can achive this?

Regards,
basti

export const MyCanvas: any = ({of}) => {

    const [showInfo, setShowInfo] = useState(false);

    function toggleInfo() {
      setShowInfo(!showInfo)
    }


    return (
        <>
            <Canvas of={of} additionalActions={[
                {
                    title: 'Show Info',
                    onClick: toggleInfo,
                }
            ]}></Canvas>
            <p>ShowInfo: {String(showInfo)}</p>
        </>
    );
};

The MDX

<MyCanvas of={Test.SomeStory}></MyCanvas>

[bastiW]

Easy workaround is to set the key prop.

I tried with useCallback first. But that did nor work

export const MyCanvas: any = ({of}) => {

    const [showInfo, setShowInfo] = useState(false);

    function toggleInfo() {
      setShowInfo(!showInfo)
    }


    return (
        <>
            <Canvas key={Number(showInfo)} of={of} additionalActions={[
                {
                    title: 'Show Info',
                    onClick: toggleInfo,
                }
            ]}></Canvas>
            <p>ShowInfo: {String(showInfo)}</p>
        </>
    );
};