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
114 views
added Apr 14, 2021 in React by lcjr Second Warrant Officer (6,570 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 Second Warrant Officer (6,570 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 Second Warrant Officer (6,570 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 Second Warrant Officer (6,570 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 Second Warrant Officer (6,570 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.
...