List component

List comonents show items one after another in an order of magnitude.

• Self-contained List component

function List() {
  const list = [{ title: "yo ya" }, { title: "yeah" }];
  return `
    <div id="list">
      <ul id="list">
        ${list.map((item) => `<li>${item.title}</li>`)}
      </ul>
    </div>
  `;
}

$render(List);

• Dependent List component

const todos = [{ title: "yo ya" }, { title: "yeah" }];

function List(todos = []) {
  return `
    <div id="list">
      <ul id="list">
        ${todos && todos.map((todo) => `<li>${todo.title}</li>`)}
      </ul>
    </div>
  `;
}

$render(List, todo);

Or

const App = () => {
  const todos = [{ title: "yo ya" }, { title: "yeah" }];
  return `
    <div id="app">
      <List todos=${stringify(todos)} />
    </div>
  `;
};

function List(todos = []) {
  return `
    <div id="list">
      <ul id="list">
        ${todos && todos.map((todo) => `<li>${todo.title}</li>`)}
      </ul>
    </div>
  `;
}

$render(App);

• Playground