From 0e221f09846ab09c38b5285b3db31a62215d7217 Mon Sep 17 00:00:00 2001
From: Aman Salwan <121633121+AmanSal1@users.noreply.github.com>
Date: Wed, 3 Apr 2024 00:07:05 +0530
Subject: [PATCH] Logic for removing the 'None' property along with its
 corresponding test case. (#2969)

---
 reflex/components/component.py     |  3 +++
 tests/components/test_component.py | 39 +++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index f1d7833bf..c8c3f5b9d 100644
--- a/reflex/components/component.py
+++ b/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.
diff --git a/tests/components/test_component.py b/tests/components/test_component.py
index fef5506e5..9cdf14f70 100644
--- a/tests/components/test_component.py
+++ b/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."""