Add ruby logic to replace null with undefiend in props json

Author: ahangarha

lib/react/rails/component_mount.rb

@@ -56,7 +56,7 @@ def generate_html_options(name, options, props, prerender_options)
         unless prerender_options == :static
           html_options[:data].tap do |data|
             data[:react_class] = name
-            data[:react_props] = (props.is_a?(String) ? props : props.to_json)
+            data[:react_props] = props_to_json(props)
             data[:hydrate] = "t" if prerender_options
 
             num_components = @cache_ids.count { |c| c.start_with? name }
@@ -67,6 +67,15 @@ def generate_html_options(name, options, props, prerender_options)
         html_options
       end
 
+      def props_to_json(props)
+        return props if props.is_a?(String)
+        return props.to_json unless Dummy::Application.config.react.null_to_undefined_props
+
+        # This regex matches key:value with null values while ensuing no string with similar
+        # pattern gets matched. It doesn't include null values in arrays.
+        props.to_json.gsub(/([^\\]":)null([,}\]])/, '\1undefined\2')
+      end
+
       def rendered_tag(html_options, &block)
         html_tag = html_options[:tag] || :div
 

lib/react/rails/railtie.rb

@@ -12,6 +12,7 @@ class Railtie < ::Rails::Railtie
       config.react.jsx_transformer_class = nil # defaults to BabelTransformer
       config.react.camelize_props = false # pass in an underscored hash but get a camelized hash
       config.react.sprockets_strategy = nil # how to attach JSX to the asset pipeline (or `false` for none)
+      config.react.null_to_undefined_props = false # Set to true to convert null values in props into undefined
 
       # Server rendering:
       config.react.server_renderer_pool_size  = 1   # increase if you're on JRuby

test/react/rails/component_mount_test.rb

@@ -128,5 +128,23 @@ def self.react_rails_prerenderer
 
       assert_equal %(<div>rendered Foo with {&quot;ok&quot;:true}</div>), rendered_component
     end
+
+    test "#react_component sets null props to undefined when null_to_undefined_props set to true" do
+      app.config.react.null_to_undefined_props = true
+
+      @helper.setup(DummyController)
+      rendered_component = @helper.react_component("Foo", { bar: nil, content: 'bar":null,' })
+
+      assert_includes rendered_component, '&quot;bar&quot;:undefined,&quot;content&quot;:&quot;bar\\&quot;:null,&quot;'
+    end
+
+    test "#react_component passes null props as null when null_to_undefined_props set to false" do
+      app.config.react.null_to_undefined_props = false
+
+      @helper.setup(DummyController)
+      rendered_component = @helper.react_component("Foo", { bar: nil, content: 'bar":null,' })
+
+      assert_includes rendered_component, "&quot;bar&quot;:null,&quot;content&quot;:&quot;bar\\&quot;:null,&quot;"
+    end
   end
 end