react - condition examples

Question

<a className="overlay">
  <span className="counter">{storiesCount} stories</span> 
  {isnew === 'yes' ? (
      <span className='nar-new'></span>    
    ) : ( 
      <span className='nar-old'></span>  
    )}
</a>

 

Answer 1

const coworking = get(data, 'co_working_i', '');
const coworking_price = get(data, 'co_working_price_d', '');
const coworking_period = get(data, 'co_working_pu_s', '');
const changed = get(data, 'changed_i', '');

let callForPriceCheck;
if (coworking && coworking_price && coworking_period){
  callForPriceCheck = <>{accounting.formatMoney(coworking_price, 'RM ', 0)}/{coworking_period}</>;
} else if (resultCallForPrice === 'yes') {
  callForPriceCheck = (
    <>
      <a className="call-for-price" href={`tel:${agentNumber}`}>Call for price</a>
    </>
  );
} else {
  callForPriceCheck = <><span className="span-rm">RM</span><span>{accounting.formatMoney(listingPrice, '', 0)}</span></>;
}

 

Answer 2

{!!coworkAmenities.length ? (
  <div className='listing-amenities'> 
  <div className="coworking-amenities-list">
    <ul className='li_loop col4'>
      {coworkAmenities.map(index => (
        <li key={index} className="media facilities-list-item"> 
          <div className="media-body"> 
            {index}
          </div>
        </li>
      ))}
    </ul>
  </div>
</div>

) : ( 

<div className="listing-specs">
  {listingType === 'auction' && auction_date && (
  <span css={css`margin-top: 5px; font-size: 14px!important; font-weight: 500;`} className="listing-spec">
    <img
      src="/static/images/icons/calendar.png"
      className="listing-spec-icon"
      height="20px"
      alt="property"
    />
    <span>
    {dayjs(auction_date).format('DD MMM, YYYY')}
    </span>
  </span>
  )}
  <span className="listing-spec">
    <img
      src={listingTypeIcon}
      className="listing-spec-icon"
      height="12px"
      alt="property"
    />
    {listingTypeTxt}
  </span>
  {/* <span> · </span> */}
  { listingType !== 'auction' && (
  <span className="listing-spec">
    <img
      src="/static/images/icons/Bedrooms.png"
      className="listing-spec-icon"
      height="12px"
      alt="property"
    />
    {(beds === 0 && listingPropertyType == 33) ? (
      <>Studio</>
    ) : (
      <>
        {extrabed
          ? `${beds} + ${extrabed} beds`
          : `${beds} beds`}
      </>
    )}
  </span>
  )}
  {/* <span> · </span> */}
  { listingType !== 'auction' && (
  <span className="listing-spec">
    <img
      src="/static/images/icons/Bathrooms.png"
      className="listing-spec-icon"
      height="12px"
      alt="property"
    />
    {`${bath} bath`}
  </span>
  )}
  {carpark && listingType !== 'auction' && (
    <span className="listing-spec">
      <img
        src="/static/images/icons/car.png"
        className="listing-spec-icon"
        height="12px"
        alt="property"
      />
      {`${carpark} carpark`}
    </span>
  )}
  {call_for_price !== 'yes' && listingType !== 'auction' && (
    <span className="listing-spec">
      <img
        src="/static/images/icons/psf.svg"
        className="listing-spec-icon"
        height="12px"
        alt="property"
      />
      {coverAreaPSFTxt}
    </span>
  )}
  <span className="listing-spec">
    <img
      src="/static/images/icons/sqft.png"
      className="listing-spec-icon"
      height="12px"
      alt="property"
    />
    {coverAreaTxt}
  </span>
</div>
)}