Quantcast
Channel: Active questions tagged python - Stack Overflow
Viewing all articles
Browse latest Browse all 23131

Radio button to control display to the right in Reflex - display not updating

$
0
0

Recently, I am looking into Python framework call Reflex for building web apps.

What I want to achieve:

When I select different code names in radio box, the code block to the right display corresponding codes. I have a dict store code names as key and code example as value.

sample_codes : dict={'Python':'python code example', 'Java':'Java code example'}

The problem:

When I click on different radio box, on_change=RadioState.set_name seems to work properly. However, the example code in code block is not updating...

In state.py

class RadioState(rx.State):    sample_codes :dict={ 'Python':'python code example','Java':'Java code example'}    name:str="Python"    code:str=sample_code["python"]    @rx.var    def change_code(self):        self.code= self.sample_code[self.name]

In index.py

code_names=['Python','Java']def display_code_block():    return rx.hstack(        rx.vstack        (            rx.text("Here are some code examples for you to start with",style=_description_style),            rx.radio(code_names,                    variant='soft',                    color_scheme='grass',                    spacing='2',                    size='1',                    on_change=RadioState.set_name,                    justify_content="right",                    width='100%',                    ),            ),            rx.box(                 rx.code_block(                        RadioState.code,                         language="python",                         theme="vs-dark",                        show_line_numbers=True,                        can_copy=True),            # align_items="center",            justify_content="center",            width="100%",            height='50vh'        )        # width="100%",       )

Viewing all articles
Browse latest Browse all 23131

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>