🔥 use Fragments instead of Divs

lib/generators/templates/component.es6.jsx

@@ -1,16 +1,12 @@
 <%= file_header %>class <%= component_name %> extends React.Component {
   render () {
-<% if attributes.size > 0 -%>
     return (
-      <div>
+      <React.Fragment>
 <% attributes.each do |attribute| -%>
-        <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}</div>
+        <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
 <% end -%>
-      </div>
+      </React.Fragment>
     );
-<% else -%>
-    return <div />;
-<% end -%>
   }
 }
 

lib/generators/templates/component.js.jsx

@@ -8,17 +8,13 @@
 <% end -%>
 
   render: function() {
-<% if attributes.size > 0 -%>
     return (
-      <div>
+      <React.Fragment>
 <% attributes.each do |attribute| -%>
-        <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}</div>
+        <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
 <% end -%>
-      </div>
+      </React.Fragment>
     );
-<% else -%>
-    return <div />;
-<% end -%>
   }
 });
 <%= file_footer %>

lib/generators/templates/component.js.jsx.coffee

@@ -7,13 +7,9 @@
 
 <% end -%>
   render: ->
-<% if attributes.size > 0 -%>
-    `<div>
+    `<React.Fragment>
 <% attributes.each do |attribute| -%>
-      <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}</div>
-<% end -%>
-    </div>`
-<% else -%>
-    `<div />`
+      <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
 <% end -%>
+    </React.Fragment>`
 <%= file_footer %>

test/generators/coffee_component_generator_test.rb

@@ -40,13 +40,9 @@ def class_name
   end
 
   test 'that it generates working jsx' do
-    expected_name_div = /\.createElement\(\s*"div",\s*null,\s*"Name:\s*",\s*this\.props\.name\s*\)/x
-    expected_shape_div = /\.createElement\(\s*"div",\s*null,\s*"Address:\s*",\s*this\.props\.address\s*\)/x
-
     run_generator %w(GeneratedComponent name:string address:shape --coffee)
     jsx = React::JSX.transform(CoffeeScript.compile(File.read(File.join(destination_root, filename))))
 
-    assert_match(Regexp.new(expected_name_div), jsx)
-    assert_match(Regexp.new(expected_shape_div), jsx)
+    assert_match(Regexp.new(expected_working_jsx), jsx)
   end
 end

test/generators/component_generator_test.rb

@@ -58,13 +58,9 @@ def filename
   end
 
   test 'generates working jsx' do
-    expected_name_div = /\.createElement\(\s*"div",\s*null,\s*\"Name:\s*\",\s*this\.props\.name\s*\)/x
-    expected_shape_div = /\.createElement\(\s*"div",\s*null,\s*\"Address:\s*\",\s*this\.props\.address\s*\)/x
-
     run_generator %w(GeneratedComponent name:string address:shape)
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
 
-    assert_match(Regexp.new(expected_name_div), jsx)
-    assert_match(Regexp.new(expected_shape_div), jsx)
+    assert_match(Regexp.new(expected_working_jsx), jsx)
   end
 end

test/generators/es6_component_generator_test.rb

@@ -34,13 +34,9 @@ def class_name
   end
 
   test 'generates working jsx' do
-    expected_name_div = /\.createElement\(\s*"div",\s*null,\s*\"Name:\s*\",\s*this\.props\.name\s*\)/x
-    expected_shape_div = /\.createElement\(\s*"div",\s*null,\s*\"Address:\s*\",\s*this\.props\.address\s*\)/x
-
     run_generator %w(GeneratedComponent name:string address:shape --es6)
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
 
-    assert_match(Regexp.new(expected_name_div), jsx)
-    assert_match(Regexp.new(expected_shape_div), jsx)
+    assert_match(Regexp.new(expected_working_jsx), jsx)
   end
 end

test/test_helper.rb

@@ -120,6 +120,10 @@ def when_stateful_js_context_available
   end
 end
 
+def expected_working_jsx
+  /\.createElement\(\s*\S*\.Fragment,\s*null,\s*\"Name:\s*\",\s*this\.props\.name,\s*\"Address:\s*\",\s*this\.props\.address\s*\)/x
+end
+
 module ParamsHelper
   # Normalize params for Rails 5.1+
   def query_params(params)