refactor: use conditionally render instead of && (#4620)

For consistency and readability.
Unleash · Sep 6, 2023 · 34d595b · 34d595b
1 parent caff040
commit 34d595b
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
@@ -157,18 +157,28 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                                 <dd>
                                     <code>{featureNaming?.pattern}</code>
                                 </dd>
-                                {Boolean(featureNaming?.example) && (
-                                    <>
-                                        <dt>Example</dt>
-                                        <dd>{featureNaming?.example}</dd>
-                                    </>
-                                )}
-                                {Boolean(featureNaming?.description) && (
-                                    <>
-                                        <dt>Description</dt>
-                                        <dd>{featureNaming?.description}</dd>
-                                    </>
-                                )}
+                                <ConditionallyRender
+                                    condition={Boolean(featureNaming?.example)}
+                                    show={
+                                        <>
+                                            <dt>Example</dt>
+                                            <dd>{featureNaming?.example}</dd>
+                                        </>
+                                    }
+                                />
+                                <ConditionallyRender
+                                    condition={Boolean(
+                                        featureNaming?.description
+                                    )}
+                                    show={
+                                        <>
+                                            <dt>Description</dt>
+                                            <dd>
+                                                {featureNaming?.description}
+                                            </dd>
+                                        </>
+                                    }
+                                />
                             </dl>
                         </StyledFlagNamingInfo>
                     }