From 34d595b5a6aef9f82258f16dd34b7434d9db9856 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Wed, 6 Sep 2023 13:51:04 +0200
Subject: [PATCH] refactor: use conditionally render instead of && (#4620)

For consistency and readability.
---
 .../feature/FeatureForm/FeatureForm.tsx       | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
index 9ecfa3619445..79928e2aed90 100644
--- 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>
                     }