Rendering Lists from Data

Map arrays to UI output and re-render the visible list when the source data changes.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<label for="query">Search</label>
<input id="query" type="search" placeholder="Type to filter">
<ul id="items"></ul>

#items {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

const items = ["Forms", "Events", "State", "Rendering", "Async"];
console.log(items.length);