React - conditional example

Question

const listingStreet = data.field_prop_street_t
    ? data.field_prop_street_t
    : '';
  const listingDistrict = data.district_s_lower ? data.district_s_lower : '';
  const listingState = data.state_s_lower ? data.state_s_lower : '';
  const fullAddress = `${listingStreet ? `${listingStreet}, ` : ''}${
    listingDistrict ? `${listingDistrict}, ` : ''
  }${listingState ? `${listingState}` : ''}`;

 

<p className="listing-address">
  {/* {listingStreet}, {listingDistrict}, {listingState} */}
  {fullAddress}
</p>

 

Answer 1

{!isShowMore && agentDesc.length > 40 && (
  <div>
    <button
      type="button"
      className="btn btn-link show-more-button"
      onClick={onShowMore}
    >
      Show More
    </button>
  </div>
)}

 

Answer 2

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
);

 

Answer 3

literal else if condition

{agentURL && (
  <div className="text-secondary url-present"> 
  <span className="agency-name">{agencyName}</span>
  <span className="agent-id">{agentID}</span>
  <span>
    <a className="agent-url" target="_blank" href={`http://${agentURL}`}>{agentURL}</a>
  </span>
  </div>
)}
{!agentURL && (
  <div className="text-secondary"> 
  <span className="agency-name">{agencyName}</span>
  <span className="agent-id">{agentID}</span>
  </div>
)}

 

Answer 4

{!!ListingId && (
  <>
    <div className="col-md-6 detail-col">
      <div className="detail-label">Listing ID</div>
      <div className="detail-data">{ListingId}</div>
    </div>
  </>
)}
{PropType != 33 && !!LandArea && (
  <>
    <div className="col-md-6 detail-col">
      <div className="detail-label">Land Area</div>
      <div className="detail-data">{landAreaTxt}</div>
    </div>
  </>
)}