title: How to write if statement inside template literals
body: <p>I want to write some logical if else statement inside the javascript template literals. I am adding html code through innerHTML and based on some logic, change html to something otherwise to something else. Please consider here that, this is an example code and the real code could be different or bigger</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const main = document.getElementById('main');
  const btn = document.getElementById('btn');
  
  let x = 5;
  
  btn.addEventListener('click', () =&gt; {
      main.innerHTML = `
      &lt;h2&gt;First&lt;/h2&gt;
          ${if(x &gt; 3) {
          return (
              `&lt;h1&gt;Its graeater also&lt;/h1&gt;`
              )
      }}
    `;
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
    
  &lt;/div&gt;
  
  &lt;button id="btn"&gt;
  Click
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>