rjsf-team#804 - Bug Fix - Empty divs are created (rjsf-team#1218)

* rjsf-team#804 - Bug Fix - Empty divs are created * rjsf-team#804 - Bug Fix - Empty divs are created - Refactoring

Author: gr8pathik

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;
  }
  },
  },