return null if both properties and patternProperties are not defined or empty

Author: theAnuragMishra

library/src/components/Schema.tsx

@@ -377,15 +377,22 @@ interface SchemaPropertiesProps {
 const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
   schema,
 }) => {
-  const properties = schema.properties() ?? {};
-  const patternProperties = schema.patternProperties() ?? {};
+  const properties = Object.entries(schema.properties() ?? {});
+  const patternProperties = Object.entries(
+    schema.patternProperties() ?? {},
+  );
+
+  if (!properties.length && !patternProperties.length) {
+    return null;
+  }
 
   const required = schema.required() ?? [];
 
   return (
     <>
-      {Object.entries(properties).map(([propertyName, property]) => (
+      {properties.map(([propertyName, property]) => (
         <Schema
+          key={propertyName}
           schema={property}
           schemaName={propertyName}
           required={required.includes(propertyName)}
@@ -395,21 +402,19 @@ const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
             propertyName,
             schema,
           )}
+        />
+      ))}
+
+      {patternProperties.map(([propertyName, property]) => (
+        <Schema
           key={propertyName}
+          schema={property}
+          schemaName={propertyName}
+          isPatternProperty
+          isProperty
+          isCircular={property.isCircular()}
         />
       ))}
-      {Object.entries(patternProperties ?? {}).map(
-        ([propertyName, property]) => (
-          <Schema
-            schema={property}
-            schemaName={propertyName}
-            isPatternProperty
-            isProperty
-            isCircular={property.isCircular()}
-            key={propertyName}
-          />
-        ),
-      )}
     </>
   );
 };