Use && for conditional rendering

This is a bit simpler than the ternary operator.
nextstrain · Sep 12, 2023 · df16c51 · df16c51
1 parent 07c77f4
commit df16c51
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
@@ -59,27 +59,27 @@ function Controls({ mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props
       <ChooseExplodeAttr tooltip={ExplodeTreeInfo} mobile={mobileDisplay} />
       <ToggleTangle />
 
-      {measurementsOn ? (
+      {measurementsOn &&
         <span style={{ marginTop: "10px" }}>
           <AnnotatedHeader title={t("sidebar:Measurements Options")} tooltip={MeasurementsOptionsInfo} mobile={mobileDisplay}/>
           <MeasurementsOptions />
         </span>
-      ) : null}
+      }
 
-      {mapOn ? (
+      {mapOn &&
         <span style={{ marginTop: "10px" }}>
           <AnnotatedHeader title={t("sidebar:Map Options")} tooltip={MapOptionsInfo} mobile={mobileDisplay}/>
           <GeoResolution />
           <TransmissionLines />
         </span>
-      ) : null}
+      }
 
-      {frequenciesOn ? (
+      {frequenciesOn &&
         <span style={{ marginTop: "10px" }}>
           <AnnotatedHeader title={t("sidebar:Frequency Options")} tooltip={FrequencyInfo} mobile={mobileDisplay}/>
           <NormalizeFrequencies />
         </span>
-      ) : null}
+      }
 
       <span style={{ marginTop: "10px" }}>
         <AnnotatedHeader title={t("sidebar:Animation Options")} tooltip={AnimationOptionsInfo} mobile={mobileDisplay}/>