React - conditional rendering as per value

Question

If apiResponseValue is equal to 0, <OkListing /> should be shown and <ContactFormComponent /> should be hidden, and vice versa. Here's how you can achieve it: 

 

const [apiResponseValue, setApiResponseValue] = useState(0);

// From this 
<div className="contact-box-form">
  <ContactFormComponent
    isMobile={true}
    ContactFormData={ContactFormData}
    listingProperties={listingProperties}
    // resp={resp}
    isContacted={false}
    AddWebAnalytics={AddWebAnalytics}
    noWhatsApp={noWhatsApp}
    onlyWhatsapp={onlyWhatsapp}
    origin="list"
  />
  {apiResponseValue === 0 && <OtpListing />}
</div>
     
// To this   
<div>
  {apiResponseValue === 0 ? <OkListing /> : (
    <ContactFormComponent
      isMobile={true}
      ContactFormData={ContactFormData}
      listingProperties={listingProperties}
      // resp={resp}
      isContacted={false}
      AddWebAnalytics={AddWebAnalytics}
      noWhatsApp={noWhatsApp}
      onlyWhatsapp={onlyWhatsapp}
      origin="list"
    />
  )}
</div>