React - Conditional rendering using variable

0 votes
226 views
added Apr 14, 2021 in React by lcjr First Warrant Officer (9,190 points)
edited Apr 20, 2021 by lcjr
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>
)}
  

 

4 Responses

0 votes
responded Apr 19, 2021 by lcjr First Warrant Officer (9,190 points)
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}

 

0 votes
responded Apr 19, 2021 by lcjr First Warrant Officer (9,190 points)
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}

 

0 votes
responded Apr 20, 2021 by lcjr First Warrant Officer (9,190 points)
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}

 

0 votes
responded Apr 20, 2021 by lcjr First Warrant Officer (9,190 points)
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`;
}

 

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