Skip rendering empty form elements

Author: colinrotherham

src/components/form-elements/error-message/ErrorMessage.tsx

@@ -10,16 +10,22 @@ const ErrorMessageComponent: FC<ErrorMessageProps> = ({
   visuallyHiddenText = 'Error',
   children,
   ...rest
-}) => (
-  <span className={classNames('nhsuk-error-message', className)} {...rest}>
-    {visuallyHiddenText ? (
-      <>
-        <span className="nhsuk-u-visually-hidden">{`${visuallyHiddenText}:`}</span> {children}
-      </>
-    ) : (
-      <>{children}</>
-    )}
-  </span>
-);
+}) => {
+  if (!children || typeof children !== 'string') {
+    return null;
+  }
+
+  return (
+    <span className={classNames('nhsuk-error-message', className)} {...rest}>
+      {visuallyHiddenText ? (
+        <>
+          <span className="nhsuk-u-visually-hidden">{`${visuallyHiddenText}:`}</span> {children}
+        </>
+      ) : (
+        <>{children}</>
+      )}
+    </span>
+  );
+};
 
 export default ErrorMessageComponent;

src/components/form-elements/hint-text/HintText.tsx

@@ -3,8 +3,16 @@ import classNames from 'classnames';
 
 export type HintTextProps = HTMLProps<HTMLDivElement>;
 
-const HintTextComponent: FC<HintTextProps> = ({ className, ...rest }) => (
-  <div className={classNames('nhsuk-hint', className)} {...rest} />
-);
+const HintTextComponent: FC<HintTextProps> = ({ className, children, ...rest }) => {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={classNames('nhsuk-hint', className)} {...rest}>
+      {children}
+    </div>
+  );
+};
 
 export default HintTextComponent;

src/components/form-elements/label/Label.tsx

@@ -22,15 +22,21 @@ const Label: FC<LabelProps> = ({ className, bold, size, isPageHeading, ...rest }
   />
 );
 
-const LabelComponent: FC<LabelProps> = ({ isPageHeading, ...rest }) => {
+const LabelComponent: FC<LabelProps> = ({ isPageHeading, children, ...rest }) => {
+  if (!children) {
+    return null;
+  }
+
   if (isPageHeading) {
     return (
       <h1 className="nhsuk-label-wrapper">
-        <Label isPageHeading {...rest} />
+        <Label isPageHeading {...rest}>
+          {children}
+        </Label>
       </h1>
     );
   }
-  return <Label {...rest} />;
+  return <Label {...rest}>{children}</Label>;
 };
 
 export default LabelComponent;

src/components/form-elements/legend/Legend.tsx

@@ -16,26 +16,32 @@ const LegendComponent: FC<LegendProps> = ({
   headingLevel = 'h1',
   size,
   ...rest
-}) => (
-  <legend
-    className={classNames(
-      'nhsuk-fieldset__legend',
-      {
-        'nhsuk-fieldset__legend--xl': isPageHeading && !size,
-      },
-      { [`nhsuk-fieldset__legend--${size}`]: size },
-      className,
-    )}
-    {...rest}
-  >
-    {isPageHeading ? (
-      <HeadingLevel className="nhsuk-fieldset__heading" headingLevel={headingLevel}>
-        {children}
-      </HeadingLevel>
-    ) : (
-      children
-    )}
-  </legend>
-);
+}) => {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <legend
+      className={classNames(
+        'nhsuk-fieldset__legend',
+        {
+          'nhsuk-fieldset__legend--xl': isPageHeading && !size,
+        },
+        { [`nhsuk-fieldset__legend--${size}`]: size },
+        className,
+      )}
+      {...rest}
+    >
+      {isPageHeading ? (
+        <HeadingLevel className="nhsuk-fieldset__heading" headingLevel={headingLevel}>
+          {children}
+        </HeadingLevel>
+      ) : (
+        children
+      )}
+    </legend>
+  );
+};
 
 export default LegendComponent;