Trouble using ternary operator in template literal

Question

I am trying to insert an anchor element in a template literal if the result comes back as an error. ESLint is throwing an error stating "Unexpected token, expected ;".

Can someone please tell me how to resolve?

const message = `
  <div class="message">
    <h2>${title}</h2>
    <p>${body}</p>
    `${result === 'error' ? '<a href="#">link</a>' : ''}`
  </div>`;

Answer 1

You don't need the nested backticks. Just put the ternary in the original template literal.

let title = 'My title';
let body = 'Message body';
let result = 'error';

const message = `
  <div class="message">
    <h2>${title}</h2>
    <p>${body}</p>
    ${result === 'error' ? '<a href="#">link</a>' : ''}
  </div>`;

console.log(message);