0

Expectation: if the flag is true, then empty div "container" around div "content"

const Demo = () => {
   const [flagABC] = useFlagFeature(true)
   return (
     <div className="featureflagoff"> style= {} onMouseEnter = {}  //if feature flag is off || if feature flag is ON then empty div  
       <div className="content">           
          // huge code
       <div>
     </div>
   );
}

how can i avoid copying the ("huge code") twice.

hightides1973
  • 497
  • 1
  • 9
  • 27

2 Answers2

2

Assign the huge code to a variable and reference it.

const hugeCode = <div>...</div>

return (
  <div className="featureflagoff">
    <div className="content">           
      {hugeCode}
    <div>
  </div>
);
Daniel Stoyanoff
  • 1,443
  • 1
  • 9
  • 25
1

Assuming flagABC is the flag, you can do something like this:

const Demo = () => {
   const [flagABC] = useFlagFeature(true)
   return (
     <div className={flagABC ? "" : "featureflagoff"}>
       <div className="content">           
          // huge code
       <div>
     </div>
   );
}
Mahesh Samudra
  • 1,039
  • 1
  • 11
  • 25
  • my mistake. i forgot to add style and onMouseEnter in that div. so i think this solution wont work as i see i dnt want just the condition check for className instead the complete attributes. – hightides1973 Oct 06 '22 at 11:34
  • Even for the onMounseEnter function, you can simply check the flag and trigger it accordingly. And you can do the same for the styles. – Mahesh Samudra Oct 06 '22 at 11:38