amp bind to hidden does not work on page load even with default state

[omar-dulaimi]

Description

I have two buttons showing two different icons based on a state value. When the component first loads, I want one of the buttons to visible.

For some reason, it's not reading the default state resulting in the two buttons getting displayed.

Reproduction Steps

this is the state:

        <amp-state id="favState">
            <script
                type="application/json"
                dangerouslySetInnerHTML={markup(
                    JSON.stringify({
                        userId: user?.id,
                        newState: !!isAddedTofav,
                    })
                )}
            />
        </amp-state>

and this is the code for the two buttons:

            <form
                method="post"
                action-xhr={`${hostName}/api/${itemId}/toggleFav`}
                target="_top"
                id="toggle-favorite-form"
                dir="rtl"
                encType="application/x-www-form-urlencoded"
            >
                <div className="add-to-fav-wrapper">
                    <div
                        className="ops-icon"
                        on={
                            'tap:AMP.setState({ favState: { newState: false }}),toggle-favorite-form.submit'
                        }
                        role="add-to-fav"
                        tabIndex="0"
                        data-amp-bind-hidden="favState.newState == false"
                    >
                        <Favorite />
                    </div>

                    <div
                        className="ops-icon"
                        on={
                            'tap:AMP.setState({ favState: { newState: true }}),toggle-favorite-form.submit'
                        }
                        role="remove-from-fav"
                        tabIndex="1"
                        data-amp-bind-hidden="favState.newState == true"
                    >
                        <NoneFavorite />
                    </div>
                </div>
                <input
                    hidden
                    name="newState"
                    data-amp-bind-value="favState.newState"
                />
                <input
                    hidden
                    name="userId"
                    data-amp-bind-value="favState.userId"
                />
            </form>

Relevant Logs

No response

Browser(s) Affected

Chrome, Firefox

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2109102127000

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.