React - simplify same vars for code maintainability

Question

Instead of this:

<div 
className={`calc_mobileCtr ${isSponsorCalculator && PropertyPrice >= 1500000 ? 'abc ' : ''}position-absolute`}
>
  <div 
  className={`${isSponsorCalculator && PropertyPrice >= 1500000 ? 'abc ' : ''}calcmobileDl`}
  >
    {isSponsorCalculator && PropertyPrice >= 1500000 ? 'Description A' : 'Description B'}
  </div>
  <div
    className={`calcmobileBtn ${isSponsorCalculator && PropertyPrice >= 1500000 ? 'abc ' : ''}d-flex`}
    onClick={isSponsorCalculator ? (PropertyPrice >= 1500000 ? abcClick : mortgageclick) : mortgageclick}
  >
    <div 
    className={`${isSponsorCalculator && PropertyPrice >= 1500000 ? 'abc ' : ''}my-auto`}
    > 
      {isSponsorCalculator && PropertyPrice >= 1500000 ? 'Sign up A' : 'Sign up B'}
    </div>
  </div>
</div>

 

Do this:

// Calculate the condition result once
const isSponsorReq = isSponsorCalculator && PropertyPrice >= 1500000;

// Then use the variable in your JSX
<div className={`calc_mobileCtr ${isSponsorReq ? 'abc ' : ''}position-absolute`}>
  <div className={`${isSponsorReq ? 'abc ' : ''}calcmobileDl`}>
    {isSponsorReq ? 'Description A' : 'Description B'}
  </div>
  <div className={`calcmobileBtn ${isSponsorReq ? 'abc ' : ''}d-flex`} 
    onClick={isSponsorCalculator ? (PropertyPrice >= 1500000 ? abcClick : mortgageclick) : mortgageclick}>
    <div className={`${isSponsorReq ? 'abc ' : ''}my-auto`}>
      {isSponsorReq ? 'Sign up A' : 'Sign up B'}
    </div>
  </div>
</div>