Как обработать событие в шаблонной строке?

Question

[Маленький Вася]

Как правильно обработать событие в шаблоной строке в данном случае событие handle не работает

const Task = ({ categories }) => {
  
  const handle = (e) => console.log(e)

  const template = `
    <ul class="categories">
      ${
        categories.map(item => {
          return `
            <li class="category__item">
              <div class="icon close-icon" onclick="${handle}"></div>
              <span class="title">${item.title}</span>
            </li>
          `
        }).join('')
      }
    </ul>
  `
  return template
}

export default Task

Comments

[Alex]

Попробуйте так:
onclick="(${handle})()"

[Маленький Вася]

а как передать item

Answer 1

[Dima Polos]

В строке никак. Сначала создаете разметку, чтоб она появилась в dom, потом находите элемент и вешаете на него обработку.

Comments

[Curious_programmer]

Разметку нужно писать с нуля в html? Или можно вставить посредством javascript заключив в шаблонные строки ?

У меня есть разметка в js компоненте, который вшит в разметку, и также надо повесить обработчик событий на кнопку в этой разметке. Но сделать это не получается, querySelector вместо кнопки выдает null и обработчик выкидывает ошибку

[Dima Polos]

Можно и шаблоном в строке, но если это реакт, то так не работает)