Skip rendering empty form elements

Author: colinrotherham

src/components/form-elements/checkboxes/components/Item.tsx

@@ -77,25 +77,21 @@ const CheckboxesItem: FC<CheckboxesItemProps> = ({
           ref={inputRef}
           {...inputProps}
         />
-        {children ? (
-          <Label
-            className={classNames('nhsuk-checkboxes__label', labelClassName)}
-            id={`${inputID}--label`}
-            htmlFor={inputID}
-            {...restLabelProps}
-          >
-            {children}
-          </Label>
-        ) : null}
-        {hint ? (
-          <HintText
-            className={classNames('nhsuk-checkboxes__hint', hintClassName)}
-            id={`${inputID}--hint`}
-            {...restHintProps}
-          >
-            {hint}
-          </HintText>
-        ) : null}
+        <Label
+          className={classNames('nhsuk-checkboxes__label', labelClassName)}
+          id={`${inputID}--label`}
+          htmlFor={inputID}
+          {...restLabelProps}
+        >
+          {children}
+        </Label>
+        <HintText
+          className={classNames('nhsuk-checkboxes__hint', hintClassName)}
+          id={`${inputID}--hint`}
+          {...restHintProps}
+        >
+          {hint}
+        </HintText>
       </div>
       {conditional && (
         <div

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/hint-text/__tests__/Hint.test.tsx

@@ -14,4 +14,10 @@ describe('Hint', () => {
 
     expect(container.textContent).toBe('Text');
   });
+
+  it('renders null with no children', () => {
+    const { container } = render(<Hint />);
+
+    expect(container.querySelector('div')).toBeNull();
+  });
 });

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/label/__tests__/Label.test.tsx

@@ -25,4 +25,10 @@ describe('Label', () => {
       '<h1 class="nhsuk-label-wrapper"><label class="nhsuk-label nhsuk-label--xl">Text</label></h1>',
     );
   });
+
+  it('renders null with no children', () => {
+    const { container } = render(<Label />);
+
+    expect(container.querySelector('label')).toBeNull();
+  });
 });

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;

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

@@ -15,4 +15,10 @@ describe('Legend', () => {
     expect(container.querySelector('.nhsuk-fieldset__legend--xl')).toBeTruthy();
     expect(container.querySelector('.nhsuk-fieldset__heading')?.textContent).toBe('Text');
   });
+
+  it('renders null with no children', () => {
+    const { container } = render(<Legend />);
+
+    expect(container.querySelector('legend')).toBeNull();
+  });
 });

src/components/form-elements/radios/components/Item.tsx

@@ -67,21 +67,17 @@ const RadiosItem: FC<RadiosItemProps> = ({
           ref={inputRef}
           {...rest}
         />
-        {children ? (
-          <Label
-            className="nhsuk-radios__label"
-            id={`${inputID}--label`}
-            htmlFor={inputID}
-            {...labelProps}
-          >
-            {children}
-          </Label>
-        ) : null}
-        {hint ? (
-          <HintText className="nhsuk-radios__hint" id={`${inputID}--hint`} {...hintProps}>
-            {hint}
-          </HintText>
-        ) : null}
+        <Label
+          className="nhsuk-radios__label"
+          id={`${inputID}--label`}
+          htmlFor={inputID}
+          {...labelProps}
+        >
+          {children}
+        </Label>
+        <HintText className="nhsuk-radios__hint" id={`${inputID}--hint`} {...hintProps}>
+          {hint}
+        </HintText>
       </div>
       {conditional && (
         <div