#804 - Bug Fix - Empty divs are created

src/components/fields/ArrayField.js

@@ -21,17 +21,15 @@ import {
 
 function ArrayFieldTitle({ TitleField, idSchema, title, required }) {
   if (!title) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
   const id = `${idSchema.$id}__title`;
   return <TitleField id={id} title={title} required={required} />;
 }
 
 function ArrayFieldDescription({ DescriptionField, idSchema, description }) {
   if (!description) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
   const id = `${idSchema.$id}__description`;
   return <DescriptionField id={id} description={description} />;

src/components/fields/DescriptionField.js

@@ -4,8 +4,7 @@ import PropTypes from "prop-types";
 function DescriptionField(props) {
   const { id, description } = props;
   if (!description) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
   if (typeof description === "string") {
     return (

src/components/fields/SchemaField.js

@@ -61,8 +61,7 @@ function getFieldComponent(schema, uiSchema, idSchema, fields) {
 function Label(props) {
   const { label, required, id } = props;
   if (!label) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
   return (
     <label className="control-label" htmlFor={id}>
@@ -88,8 +87,7 @@ function LabelInput(props) {
 function Help(props) {
   const { help } = props;
   if (!help) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
   if (typeof help === "string") {
     return <p className="help-block">{help}</p>;
@@ -100,7 +98,7 @@ function Help(props) {
 function ErrorList(props) {
   const { errors = [] } = props;
   if (errors.length === 0) {
-    return <div />;
+    return null;
   }
 
   return (
@@ -254,10 +252,8 @@ function SchemaFieldRender(props) {
   const disabled = Boolean(props.disabled || uiSchema["ui:disabled"]);
   const readonly = Boolean(props.readonly || uiSchema["ui:readonly"]);
   const autofocus = Boolean(props.autofocus || uiSchema["ui:autofocus"]);
-
   if (Object.keys(schema).length === 0) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
 
   const uiOptions = getUiOptions(uiSchema);

test/ArrayFieldTemplate_test.js

@@ -42,7 +42,13 @@ describe("ArrayFieldTemplate", () => {
     describe("Stateful ArrayFieldTemplate", () => {
       class ArrayFieldTemplate extends PureComponent {
         render() {
-          return <div>{this.props.items.map(item => item.element)}</div>;
+          return (
+            <div className="field-content">
+              {this.props.items.map((item, i) => (
+                <div key={i}>item.children</div>
+              ))}
+            </div>
+          );
         }
       }
 
@@ -52,8 +58,9 @@ describe("ArrayFieldTemplate", () => {
           formData,
           ArrayFieldTemplate,
         });
-
-        expect(node.querySelectorAll(".field-array div")).to.have.length.of(3);
+        expect(
+          node.querySelectorAll(".field-array .field-content div")
+        ).to.have.length.of(3);
       });
     });
 

test/SchemaField_test.js

@@ -108,7 +108,7 @@ describe("SchemaField", () => {
               receivedProps = props;
             }
             render() {
-              return <div />;
+              return null;
             }
           },
         },