React - simplify conditional rendering with dynamic ternary operator on JSX

Question

Instead of this: 

// On function area
let calc_sideImgBg = "calc_sideImgBg";

if (isSponsorCalculator) {
    if (PropertyPrice >= 1500000) {
      calc_sideImgBg = "calc_sideImgBg hsbc";
    } else {
      calc_sideImgBg = "calc_sideImgBg";
    }
} else {
calc_sideImgBg = "calc_sideImgBg";
}
  
  
//  on JSX
{isSponsorCalculator ? (
PropertyPrice >= 1500000 ? (
  <img
  className={calc_sideImgBg}
  src="bg2.png"
  onClick={abcClick}
  alt="Mortgage-calculator"
/>
) : (
  <img
    className={calc_sideImgBg}
    onClick={mortgageclick}
    src="bg1.png"
    alt="Mortgage-calculator"
  />
    )
) : (
  <img
    className={calc_sideImgBg}
    onClick={mortgageclick}
    src="bg1.png"
    alt="Mortgage-calculator"
  />
)}

 

Use this, no var need to be declared, all directly on JSX:

<img
  className={`calc_sideImgBg ${isSponsorCalculator && PropertyPrice >= 1500000 ? 'abc' : ''}`}
  onClick={isSponsorCalculator ? (PropertyPrice >= 1500000 ? abcClick : mortgageclick) : mortgageclick}
  src={isSponsorCalculator && PropertyPrice >= 1500000 ? 'bg2.png' : 'bg1.png'}
  alt="Mortgage-calculator"
/>

 

 

Answer 1

//condition where, you need to switch between the 2 class based on conditional rendering,
// for example here; we use to check isSponsorCalculator & PropertyPrice   
className="abc calcmobileDl" or 
className="calcmobileDl"

className={`${isSponsorCalculator && PropertyPrice >= 1500000 ? 'abc ' : ''}calcmobileDl`}

 

Answer 2

Another example:

instead of this 

{isSponsorCalculator ? (
  PropertyPrice >= 1500000 ? (
    <>
      <div className="hsbc calcmobileDl">
        Apply for your home loan with HSBC HomeSmart
      </div>
      <div
        className={`${calcmobileBtn} d-flex`}
        onClick={hsbcClick}
      >
        <div className="hsbc my-auto">Sign up now</div>
      </div>
    </>
  ) : (
    <>
      <div className="calcmobileDl">
        Download your free credit report and get your loan
        pre-approved
      </div>
      <div className={`${calcmobileBtn} d-flex`}
        onClick={mortgageclick}
      >
        <div className="my-auto">Get your credit report</div>
      </div>
    </>
  )
) : (
<>
  <div className="calcmobileDl">
    Download your free credit report and get your loan
    pre-approved
  </div>
  <div className={`${calcmobileBtn} d-flex`}
    onClick={mortgageclick}
  >
    <div className="my-auto">Get your credit report</div>
  </div>
</>
)}

// use this 
<div 
className={`${isSponsorCalculator && PropertyPrice >= 1500000 ? 'hsbc ' : ''}calcmobileDl`}
>
  {isSponsorCalculator && PropertyPrice >= 1500000 ? 'Apply for your home loan with HSBC HomeSmart' : 'Download your free credit report and get your loan pre-approved'}
</div>
<div
  className={`calcmobileBtn ${isSponsorCalculator && PropertyPrice >= 1500000 ? 'hsbc ' : ''}d-flex`}
  onClick={isSponsorCalculator ? (PropertyPrice >= 1500000 ? hsbcClick : mortgageclick) : mortgageclick}
>
<div 
className={`${isSponsorCalculator && PropertyPrice >= 1500000 ? 'hsbc ' : ''}my-auto`}
>
  
  {isSponsorCalculator && PropertyPrice >= 1500000 ? 'Sign up now' : 'Get your credit report'}
</div>
</div>