diff --git a/libs/application/ui-shell/src/components/FormStepper.tsx b/libs/application/ui-shell/src/components/FormStepper.tsx index 0978da8f6af1..5029dac268a2 100644 --- a/libs/application/ui-shell/src/components/FormStepper.tsx +++ b/libs/application/ui-shell/src/components/FormStepper.tsx @@ -53,20 +53,25 @@ const FormStepper = ({ childrenToParse.push(child) }) - return childrenToParse.map((child, i) => { - const isChildActive = - isParentActive && currentScreen.subSectionIndex === i - - return ( - - {formatText(child.title, application, formatMessage)} - - ) - }) + return childrenToParse + .map((child, i) => { + const isChildActive = + isParentActive && currentScreen.subSectionIndex === i + const childText = formatText(child.title, application, formatMessage) + + if (!childText) return null + + return ( + + {childText} + + ) + }) + .filter(Boolean as unknown as ExcludesFalse) } const stepperTitle = isMobile ? null : ( @@ -85,23 +90,33 @@ const FormStepper = ({ sections && [ stepperTitle, - ...sections.map((section, i) => ( -
1 - ? parseSubsections( - section.children, - currentScreen.sectionIndex === i, - ) - : undefined - } - isComplete={currentScreen.sectionIndex > i} - /> - )), + ...sections.map((section, i) => { + const sectionTitle = formatText( + section.title, + application, + formatMessage, + ) + + if (!sectionTitle) return null + + return ( +
1 + ? parseSubsections( + section.children, + currentScreen.sectionIndex === i, + ) + : undefined + } + isComplete={currentScreen.sectionIndex > i} + /> + ) + }), ].filter(Boolean as unknown as ExcludesFalse) } />