Are you first timer at lazacode.org? Why not join us and start exchange your programming knowledge with everyone. Register today!

React - Conditional rendering using variable

0 votes
26 views
added Apr 14 in React by lcjr Second Warrant Officer (5,360 points)
edited Apr 20 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 by lcjr Second Warrant Officer (5,360 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 by lcjr Second Warrant Officer (5,360 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 by lcjr Second Warrant Officer (5,360 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 by lcjr Second Warrant Officer (5,360 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.
...