React - conditional (ternary) operator

0 votes
558 views
added Apr 19, 2021 in React by lcjr First Warrant Officer (11,530 points)
edited Apr 20, 2021 by lcjr
//Syntax
condition ? exprIfTrue : exprIfFalse

//Example
var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

<div className="col-md-3">
  {ColumnSideData.agent.agent_pic ? (
    <img
      className="agent-img"
      src={ColumnSideData.agent.agent_pic}
      onError={e => {
        e.target.src = '/static/images/avatar.png';
      }}
    />
  ) : (
    <span className="badge agent-avatar">{agentName}</span>
  )}
</div>

 

5 Responses

0 votes
responded Apr 20, 2021 by lcjr First Warrant Officer (11,530 points)
const defenderSale =
  defenderProperties.defenderType === '110' ||
  defenderProperties.defenderType === 'd90'
    ? true
    : false;

 

0 votes
responded Apr 20, 2021 by lcjr First Warrant Officer (11,530 points)
{listingBeds === 0 ? <>Studio</> : <>{listingBeds} beds</>}

{beds === 0 ? <>Studio</> : <>{beds} beds</>}

 

0 votes
responded Apr 20, 2021 by lcjr First Warrant Officer (11,530 points)
<Link href={listurlObj} as={listingUrl}>
    <a
      target={
        isBlue || isRed || isYellow || isGreen ? '_blank' : '_self'
      }
      className="text-decoration-none"
    >

 

0 votes
responded Apr 20, 2021 by lcjr First Warrant Officer (11,530 points)
{isShortlist === 0 ? (
  <img src="/static/images/icons/fav.svg" alt="shortlist" />
) : (
  <img
    src="/static/images/icons/fav-active.svg"
    alt="shortlist"
  />
)}

 

0 votes
responded Apr 21, 2021 by lcjr First Warrant Officer (11,530 points)
{(listingItemData.field_exclusive_i === 1 ||
  listingItemData.featured_id_i) && (
  <div className="item-exclusive d-block d-md-none">
    {listingItemData.featured_id_i ? (
      <div className="featured">MUST SEE</div>
    ) : (
      <div className="exclusive">LC Only</div>
    )}
  </div>
)}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...