React - Conditional rendering using variable

Question

E.g check the 'active'value.Hide the data when the data value is other than 'Active'.

const agentURL = data.agent ? data.agent.field_agent_domain_name_s : '';
const agentWebsiteStatus = data.agent ? data.agent.field_agent_website_status_s : '';
  
{agentWebsiteStatus === 'Active' && (
  <span>
    <a className="agent-url" target="_blank" href={`http://${agentURL}`}>{agentURL}</a>
  </span>
)}
  

 

Answer 1

const resultPropPrice = get(ColumnSideData, 'result.call_for_price', '');

let propPriceChecked;
  if (resultPropPrice === 'yes') {
    propPriceChecked = <span>call for price</span>;
  } else {
    propPriceChecked = (
      <p className="prop-price">
        {accounting.formatMoney(parseInt(asking_price, 10), 'RM ', 0)}
      </p>
    );
  }
  
  return (
    <div className="column-side">
    {propPriceChecked}

 

Answer 2

const resultCallForPrice = get(ColumnSideData, 'result.call_for_price', '');

let callForPriceCheck;
if (resultCallForPrice === 'yes') {
  callForPriceCheck = <p className="prop-price">Call for price</p>;
} else {
  callForPriceCheck = (
    <div className="mortgage-calc">
      <p className="prop-price">
      {accounting.formatMoney(parseInt(asking_price, 10), 'RM ', 0)}
    </p> 
    {listingProperties.PropertyListingType === 'sale' && (
      <p className="prop-mortgage" onClick={onToggleMortgageCalculator}>
        Mortgage:{' '}
        <a href="">
          {accounting.formatMoney(monthlyMortgageAmount, 'RM ', 0)} /
          mth
        </a>
      </p>
    )}
    </div>
  );
}

return (
    <div className="column-side">
    {callForPriceCheck}

 

Answer 3

const agentNumber = get(ColumnMainData, 'agent.contact_s', '');
const resultCallForPrice = get(ColumnMainData, 'result.call_for_price', '');
const asking_price = get(
  ColumnMainData,
  'result.field_prop_asking_price.und[0].value',
  '',
);
let callForPriceCheck;
if (resultCallForPrice === 'yes') {
  callForPriceCheck = (
    <p className="prop-price-mobile d-lg-none">
      <a href={`tel:${agentNumber}`}>Call for price</a>
    </p>
  );
} else {
  callForPriceCheck = (
    <div className="mortgage-calc">
      <p className="prop-price-mobile d-lg-none">
        {accounting.formatMoney(parseInt(asking_price, 10), 'RM ', 0)}
      </p>
      {listingProperties.PropertyListingType === 'sale' && (
        <p
          className="mortgage-mobile d-lg-none"
          onClick={onToggleMortgageCalculator}
        >
          Mortgage :{' '}
          <a href="">
            {accounting.formatMoney(monthlyMortgageAmount, 'RM ', 0)} / mth
          </a>
        </p>
      )}
    </div>
  );
}


return (
    <div className="column-side">
    {callForPriceCheck}

 

Answer 4

const carChecking = get(JSONdata, 'result.car_model', '');

let checkforLr;
if (carChecking === 'land rover') {
  checkforLr = `${title} for ${type.charAt(0).toUpperCase() +
    it is LR yerra`;
} else {
  checkforLr = `${title} for ${type.charAt(0).toUpperCase() +
    is not a freaking LR`;
}