Fix f-strings in props (#891)

pynecone/components/component.py

@@ -120,7 +120,7 @@ class Component(Base, ABC):
             if types._issubclass(field_type, Var):
                 try:
                     # Try to create a var from the value.
-                    kwargs[key] = Var.create(value)
+                    kwargs[key] = Var.create(value, is_string=type(value) == str)
 
                     # Check that the var type is not None.
                     if kwargs[key] is None:
@@ -365,7 +365,7 @@ class Component(Base, ABC):
         children = [
             child
             if isinstance(child, Component)
-            else Bare.create(contents=Var.create(child, is_string=True))
+            else Bare.create(contents=Var.create(child))
             for child in children
         ]
         return cls(children=children, **props)

tests/components/base/test_bare.py

@@ -22,4 +22,4 @@ def test_fstrings(contents, expected):
     """
     comp = Bare.create(contents)
     comp.set_state(DefaultState)
-    assert str(comp) == expected
+    assert str(comp) == f"{{`{expected}`}}"

tests/components/forms/test_uploads.py

@@ -53,7 +53,7 @@ def test_upload_component_render(upload_component):
         str(upload_component) == f"<ReactDropzone multiple={{true}}{os.linesep}"
         "onDrop={e => File(e)}>{({getRootProps, getInputProps}) => (<Box "
         'sx={{"border": "1px dotted black"}}{...getRootProps()}><Input '
-        f'type="file"{{...getInputProps()}}/>{os.linesep}'
+        f"type={{`file`}}{{...getInputProps()}}/>{os.linesep}"
         f"<Button>{{`select file`}}</Button>{os.linesep}"
         "<Text>{`Drag and drop files here or click to select "
         "files`}</Text></Box>)}</ReactDropzone>"
@@ -72,7 +72,7 @@ def test_upload_component_with_props_render(upload_component_with_props):
         f"noDrag={{true}}{os.linesep}"
         "onDrop={e => File(e)}>{({getRootProps, getInputProps}) => (<Box "
         'sx={{"border": "1px dotted black"}}{...getRootProps()}><Input '
-        f'type="file"{{...getInputProps()}}/>{os.linesep}'
+        f"type={{`file`}}{{...getInputProps()}}/>{os.linesep}"
         f"<Button>{{`select file`}}</Button>{os.linesep}"
         "<Text>{`Drag and drop files here or click to select "
         "files`}</Text></Box>)}</ReactDropzone>"