app = rx.App(state=rx.State)


class State(rx.State):
    submitted: str = ""

    area_1: str = ""
    area_2: str = ""

    def handle_submit(self, form_data: dict):
        self.submitted = str(form_data)


def layout() -> rx.Component:
    return rx.vstack(
        rx.form(
            rx.text_area(
                enter_key_submit=True,
                name="works_without_value",
                placeholder="works with no value set",
            ),
            rx.text_area(
                value=State.area_1,
                on_change=State.set_area_1,
                enter_key_submit=True,
                name="not_working",
                placeholder="doesn't work",
            ),
            rx.el.textarea(
                value=State.area_2,
                on_change=State.set_area_2,
                enter_key_submit=True,
                name="works",
                placeholder="works",
            ),
            on_submit=State.handle_submit,
        ),
        rx.text(State.submitted)
    )


app.add_page(layout, route="/")