Best way of handling temporal state of user component while editing

[spadgeaki]

I want to have checkbox in related.settings (SignUpFormSettings) that switches SignUpForm layout to "Thank you message". I was thinking of using node.data.custom.showSubmitted value but custom state is getting persisted.

SignUpForm.craft = {
    displayName: "SignUpForm",
    props: {
        className:
            "w-full bg-gray-200 rounded-lg p-2 flex flex-col m-2 md:mx-auto md:mt-0 md:w-1/2 xl:w-1/4",
    },
    custom: {
        showSubmitted: false,
    },
    related: {
        settings: SignUpFormSettings,
    },
}

Is there a recommended way of temporary switching UI state like this without it persisting in exported state?

[matdru]

Craft doesn't have a concept of permanent vs temporary state, this is more of an implementation detail on your side, and it's up to you to decide which parts of the state you want to save or the whole thing as is. If you want to use craft state to store temporary data, make sure to strip it away outside of craft before you save it somewhere.

Alternatively you can use other state manager to hold this information, for example adding SignUpFormContext around settings and editor that can hold this information for you, so you can toggle it from SignUpFormSettings and read the value in SignUpForm.