CODEWITHSUNDEEP
reactjsreact-fragment
hightides1973
hightides1973

Reputation: 527

Code duplication: how to avoid in Reactjs

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.

Upvotes: 0

Views: 79

Answers (2)

Mahesh Samudra
Mahesh Samudra

Reputation: 1228

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>
   );
}

Upvotes: 1

Daniel Stoyanoff
Daniel Stoyanoff

Reputation: 1564

Assign the huge code to a variable and reference it.

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

return (
  <div className="featureflagoff">
    <div className="content">           
      {hugeCode}
    <div>
  </div>
);

Upvotes: 2

Related Questions