Components
List

List component

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

  • Self-contained List component
List
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
List
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
GalleryModal