Search code examples
htmlcomponentsweb-componenttemplate-literals

Use template literals for multiple classes

const dummydata = [
  { id: 1, description: "Walk the dog", completed: false },
  { id: 2, description: "Play football", completed: true }
];

This is my data I use to create classes in HTML like this:

this.root.innerHTML = `
<div ${data.completed ? "class=todo-item done" : "class=todo-item"}> # Does not work
<input type="checkbox" ${data.completed ? "checked" : ""} />
<h4>${data.description}</h4>
</div>`;

In my HTML it looks this this:

<div class="todo-item" done>

"done" is not included in the class. What am I doing wrong?

Solution

  • Try this,

    this.root.innerHTML = `
    <div class="${data.completed ? 'todo-item done' : 'todo-item'}">
    <input type="checkbox" ${data.completed ? "checked" : ""} />
    <h4>${data.description}</h4>
    </div>
`;