pc.html error when referencing a base var

[karlutxo]

pc.html(State.var) raises TypeError: Invalid var passed for prop dangerouslySetInnerHTML, expected type pynecone.var.Var[typing.Dict]

sample snippet: import pynecone as pc

class State(pc.State): text: str = 'Some html'

def index(): return pc.vstack( pc.html("some html"), #it works pc.text(State.text), # it works pc.html(State.text), # raises TypeError: Invalid var passed for prop dangerouslySetInnerHTML, expected type pynecone.var.Var[typing.Dict] )

app = pc.App(state=State) app.add_page(index) app.compile()

• Python Version: 3.11
• Pynecone Version: 0.1.14
• OS: MacOs 12.5.1

[TommyDew42]

I can give it a try. The state has to go one level deeper than the usual:

<Box dangerouslySetInnerHTML={{ __html: state.html }}>

// instead of usually the state is directly pass as a arg

<Box dangerouslySetInnerHTML={state.html}>

@Alek99 Do we allow this? Is this pattern common now in pynecone?

[picklelo]

@TommyDew42 yes you can for example have state vars as dictionary values, so this should work.

[d29107d]

I will fix this bug after this pr is merged.

[TommyDew42]

I will fix this bug after this pr is merged.

Thank you so much!! Any chance we can have an unit test for this issue? If our change in #571 can fix the issue here

[d29107d]

@TommyDew42 If this pr(https://github.com/pynecone-io/pynecone/pull/571) is merged, I will use the get_field_value to fix #490. Which issue do you want to have a unit test?

[TommyDew42]

Hey @d29107d! I'm just wondering if we can have a unit test for #490 i.e. the issue of the current webpage. Would be great if we can have one! Since we are talking about the possibility of fixing the issue #490 with #571.

Thanks again for working on this!!!

[csears]

I found a slightly hacky workaround to this bug. Using a custom Box component with a property called dangerouslySetInnerHTML we can recreate the effect of the HTML component without triggering this bug. It also requires setting the state variable to a dict in a way that the React component will pick up the prop.

from pcconfig import config
import pynecone as pc

from typing import Dict
from pynecone.var import Var
from pynecone.components.layout.box import Box

class CustomHtml(Box):
    dangerouslySetInnerHTML: Var[Dict]
    
class State(pc.State):
    html = {"__html": "<b>hello</b>"} # this is the required dict structure for the prop

def index() -> pc.Component:
    return pc.center(
        CustomHtml.create(dangerouslySetInnerHTML=State.html)
    )

app = pc.App(state=State)
app.add_page(index)
app.compile()

Hope that helps someone!