Logic for removing the 'None' property along with its corresponding test case. (#2969)

reflex/components/component.py

@@ -645,6 +645,9 @@ class Component(BaseComponent, ABC):
                 )
                 props[prop] = props.pop(under_prop)
 
+        # Filter out None props
+        props = {key: value for key, value in props.items() if value is not None}
+
         # Validate all the children.
         for child in children:
             # Make sure the child is a valid type.

tests/components/test_component.py

@@ -363,7 +363,7 @@ def test_valid_props(component1, text: str, number: int):
 
 
 @pytest.mark.parametrize(
-    "text,number", [("", "bad_string"), (13, 1), (None, 1), ("test", [1, 2, 3])]
+    "text,number", [("", "bad_string"), (13, 1), ("test", [1, 2, 3])]
 )
 def test_invalid_prop_type(component1, text: str, number: int):
     """Test that an invalid prop type raises an error.
@@ -420,6 +420,43 @@ def test_get_event_triggers(component1, component2):
     )
 
 
+@pytest.fixture
+def test_component() -> Type[Component]:
+    """A test component.
+
+    Returns:
+        A test component.
+    """
+
+    class TestComponent(Component):
+        pass
+
+    return TestComponent
+
+
+# Write a test case to check if the create method filters out None props
+def test_create_filters_none_props(test_component):
+    child1 = test_component()
+    child2 = test_component()
+    props = {
+        "prop1": "value1",
+        "prop2": None,
+        "prop3": "value3",
+        "prop4": None,
+        "style": {"color": "white", "text-align": "center"},  # Adding a style prop
+    }
+
+    component = test_component.create(child1, child2, **props)
+
+    # Assert that None props are not present in the component's props
+    assert "prop2" not in component.get_props()
+    assert "prop4" not in component.get_props()
+
+    # Assert that the style prop is present in the component's props
+    assert component.style["color"] == "white"
+    assert component.style["text-align"] == "center"
+
+
 class C1State(BaseState):
     """State for testing C1 component."""