render specific text based on Conditional statement

Spatial_TX 0
Viewed 19

I have the following JSON

{"location":"2034","type":"Residential","price":400000,"address":"123 Fake Street","suburb":"Maroubra","historical_DAs":0,"description":"Residential","property_ID":1},
{"location":"2036","type":"Commercial","price":475000,"address":"123 Fake Street","suburb":"Coogee","historical_DAs":10,"description":"Government","property_ID":2},
{"location":"2035","type":"Food & Bev","price":56000,"address":"123 Fake Street","suburb":"Clovelly","historical_DAs":3,"description":"Residential","property_ID":3},
{"location":"2031","type":"Education","price":69070,"address":"123 Fake Street","suburb":"Randwick","historical_DAs":7,"description":"Government","property_ID":4},
{"location":"2036","type":"Education","price":69070,"address":"123 Fake Street","suburb":"Randwick","historical_DAs":7,"description":"Government","property_ID":5}

I want to render different images based upon the description field (currently trying to just get text to render correctly atm.) What I have tried so far:

    function TypeImages({ description }) { 
  
  function Residential(props) {
    return <div>
       <h1>Image 1</h1>
     </div>;
  }

  function Government(props) {
    return <div>
       <h1>Image 2 </h1>
     </div>;
  }

  function TypeImage(props) {
    if (description === 'Residential') {
      return <Residential />;
    } else
  return <Commercial />;
  }


  return (
    <div>
      <div>
        <div className="hidden lg:inline-flex mb-1 px-9">
          <TypeImage/>      
          <div>
            
          </div>  
        </div>
      </div>
    </div>
  );
}

export default TypeImages;

This isn't working as what is rendered is all 'Image 2' even though there should be some 'Image 1'

Any suggestions on the most efficient way to achieve this?

Thanks!

conditional-statements reactjs javascript
1 Answers

You can do by many ways, You need to make sure or check if description has value, if not you probably get unexpected behaviors

Sandbox Example: https://codesandbox.io/s/stupefied-water-sc4o5h?file=/src/App.js

  1. Using ternary conditional statements

  return (
    <div>
      <div>
        <div className="hidden lg:inline-flex mb-1 px-9">
          {/* Doing this */}
          {description === "Residential" ?  <Residential /> : <Government /> } 
          <div>
            
          </div>  
        </div>
      </div>
    </div>
  );

  1. Doing the way that you was working
  function TypeImage() {
    if (description === 'Residential') {
      return <Residential />;
    }
   return <Government/>;
  }

  return (
    <div>
      <div>
        <div className="hidden lg:inline-flex mb-1 px-9">
          <TypeImage/>      
          <div>
        </div>  
        </div>
      </div>
    </div>
  );
  1. Doing this another way using conditional inline
 return (
    <div>
      <div>
        <div className="hidden lg:inline-flex mb-1 px-9">
          {description === "Residential" &&  <Residential />  }    
          {description === "Government" &&  <Government/>  }   
          <div>
            
          </div>  
        </div>
      </div>
    </div>
  );
Siumauricio0
Related