Variables

Inserting a variable into a template mimics what you would expect from a Python f-string.

Insert Value Into Template

In this case, the template is in a function, and name comes from that scope:

def main() -> str:
    """Main entry point."""
    name = "viewdom"
    result = render(html("<div>Hello {name}</div>"))
    return result

Value From Import

In this third case, name symbol is imported from another module:

def Hello():
    """A simple hello component."""
    return render(html("<div>Hello {name}</div>"))


def main() -> str:
    """Main entry point."""
    result = Hello()
    return result

Passed-In Prop

Of course, the function could get the symbol as an argument. This style is known as “props”:

def Hello(name):
    """A simple hello component."""
    return render(html("<div>Hello {name}</div>"))


def main() -> str:
    """Main entry point."""
    result = Hello(name="viewdom")
    return result

Default Value

The function (i.e. the “component”) could make passing the argument optional by providing a default:

def Hello(name="viewdom"):
    """A simple hello component."""
    return render(html("<div>Hello {name}</div>"))


def main() -> str:
    """Main entry point."""
    result = Hello()
    return result