Rx.toast function issue when called from yield

Help
1

I made a separate file to create rx.toast components based on different arguments:
def open_toast(title: str, message: str, color: str) → rx.Component:
“”“Mostrar diálogo con mensaje.”“”
return rx.toast(
rx.vstack(rx.heading(title), rx.text(message)),
position=“bottom-center”,
description=message,
style={
“background-color”: color,
“color”: “white”,
“border”: “1px solid”,
“border-radius”: “0.53m”,
},
close_button=True,
duration=10000,
)

The problem is that when a want to call this function from a State not only it doesn’t work but also raises a react frontend exception ([Reflex Frontend Exception] ReferenceError: jsx is not defined)

This is the function that calls the def open_toast

@rx.event
async def handle_contact_form(self, form_data: Dict) → None:
“”“Manejar envío del formulario.”“”
try:

  #### LOGIC TO CREATE A CONTACT

    except Exception as e:
        toast = open_toast(
            "Error", f"Error procesando contacto B: {str(e)}", "red"
        )
        yield toast
    finally:
        self.is_loading = False

Obviously “open_toast” has been imported on the state.py file

Thanks for your help!!!

2

The error is caused by the use of rx.vstack() as the toast content.
Use the props title and description instead.