if else condition is not working in foreach

I am using if else in a foreach loop and binding that value with the container but I don’t understand Why if else condition is not working in foreach it is showing if else statement in html page like if({detailInfo.condition} !== “”){} but condition is not working? how can I use if else in a div element?

async function renderViewDetails(data, dataTableOrders) {
      let ordersDetails = data.group_id;
      var detailInfos = dataTableOrders;

      let html =
        `<div class="viewDetailModal">
          <div class="detailButtonModal">
            <p class="viewOrderId">ID:</p>
            <p class="orderdetailsid viewOrderId">${data.id}</p>
            <p class="coinviewDetail">${data.coin}</p>
          </div>
          
          <div class="rb-container">
            <ul class="rb">`;

      detailInfos.forEach(detailInfo => {
        if (detailInfo.group_id == ordersDetails) {
          let htmlSegment = `
                  <li class="rb-item timelimeVertical" ng-repeat="itembx">
                    <div class="tradingOrdersInfo">
                    <p class="orderDetailDate">${detailInfo.openedAt}</p>
            
                    <div class="tradeOrderType">
                    <p class="viewDetailOrderType">${detailInfo.type}</p>
                    <button id="showMoreLess_${detailInfo.id}" 
                     data-order-id="${detailInfo.id}" 
                     class="viewDetailOrderButton">View 
                     More</button>
                    </div>
            
                                    
                    <div id="showme_${detailInfo.id}" style="display:none";>
            
                    <div class="tradeOrderEntry">
                    <div>
                    <p class="orderDetailQuantity">Quantity:</p>
                    <p class="orderDetailQuantityValue">${detailInfo.volume}</p>
                   </div>
                   <div class="tradeOrdervaluePrice">
                   <p class="orderPnlInner"> &nbsp; ${detailInfo.group_pnl}</p>
                   <p class="pnlInnerLabel">PNL</p>
                   </div>
                   </div>
            
            
                   <div class="tradeOrderEntry tradeOrderEntryValue">
                   <div>
                   <p class="detailEntryValue entryOpa ">TP Target</p>
                   <p class="detailEntryValue entryOpa">Entry Target</p>
                   </div>
            
 if({detailInfo.condition} !== null){
                   <div>
                   <p class="detailEntryValueR viewPadd">1% <span class="viewHit">Hit</span> | 5% <span class="viewHit">Hit</span> | 10%</p>
                   <p class="detailEntryValueR"> 40% | 20% | 30% </p>
                   </div>
                   </div>
            }
            
                   <div class="tradeOrderEntry tradeOrderEntryValue">
                   <div>
                   <p class="detailEntryValue entryOpa">Expire</p>
                   </div>
            
                  
                     </div>
            
                  </div>
                  </li>`

          html += htmlSegment;
        }
      });
      html += `</ul></div></div>`;

      let container = document.querySelector('.orders-details-info');
      container.innerHTML = html;

      }