Как динамически отображать данные в HTML-таблицу в ответ?

Я пытаюсь отобразить список дел в таблице html в ответ. В настоящее время я делаю это, перебирая строки базы данных для каждого элемента списка дел:

todoLogs.forEach(todoLog => {
        tableHtmlContent += `
          <tr>
            <td>${todos.find(x => x.id === todoLog.id).title}</td>
            <td><input type = "checkbox" ${todoLog.d09_04_24 ? "checked" : "unchecked"}></input></td>
            <td><input type = "checkbox" ${todoLog.d08_04_24 ? "checked" : "unchecked"}></input></td>
            <td><button onClick=${deleteTodo}><i class = "material-icons">delete</i></button></td>
          </tr>
        `
      })

используя это для обновления переменной, содержащей строку шаблона:

  var tableHtmlContent = `
  <tr ref = {tableHeaderContainer} className='border-2 border-black ml-2'>
    <th>Habit</th>
    <th>09/04</th>
    <th>08/04</th>
  </tr>
  `

и рендеринг этой переменной внутри таблицы:

<table
        className='mt-3 border-2 [&>tr]:border-2 [&>tr>td]:border-2 [&>tr>th]:border-2 [&>tr>th]:px-1 text-center'
        dangerouslySetInnerHTML = { { __html: tableHtmlContent}}
      >
      </table>

Теперь мне нужно добавить функциональность onClick к кнопке в таблице, чтобы я мог удалять задачи:

<button onClick=${deleteTodo}><i class = "material-icons">delete</i></button>

- но на данный момент это не работает, и я получаю сообщение об ошибке: async is not defined

В любом случае способ сделать это с использованием строк шаблона сейчас кажется неэффективным, если не считать проблемы с кнопкой, поэтому мне интересно, есть ли лучший способ сделать это?

Вот как также выглядит таблица:

Изображение стола

Чтобы решить эту проблему, я уже изучил:

• использоватьRef в реакции

• функция .innerHTML()

• использоватьState()

• использоватьЭффект()

- но не смог найти ничего работоспособного. Любая помощь приветствуется?