button on_click problem

[w1249841003]

After I clicked edit, the input displayed the previous value

import reflex as rx
import random

class State(rx.State):
    table = {'name':'111'}

    def button_click(self):
        elements = ['apple', 'banana', 'cherry']
        self.table = {'name':random.choice(elements)}
        print(self.table)

def index() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.dialog.root(
                rx.dialog.trigger(
                    rx.button(rx.text('edit'),on_click=State.button_click)
                ),
                rx.dialog.content(
                    rx.form.root(
                        rx.foreach(State.table, lambda key,value:rx.input(default_value=key.to(str),name='name'),),
                        rx.form.submit(rx.button('submit'))
                    )
                )
            )
        ),
    )


app = rx.App()
app.add_page(index)

How should I deal with this problem? Thank you

[masenf]

When rendering an input in a foreach, you should pass the key prop:

lambda key, value:rx.input(default_value=key.to(str), name='name', key=key.to(str))

Adding the key prop to the rx.input will cause it to be re-rendered whenever the key changes. Otherwise the React javascript framework tries to optimize the DOM updates and won't re-create the input box with the new default_value, and default_value is only ever set once, when the component is created.

[w1249841003]

Thanks, solved