Lit template literal expressions can contain any JavaScript expression that returns a renderable value as described in the expressions documentation. When working with arrays, their prototype methods can be used to generate arrays of renderable values as well.

This example has a component with a names state property containing an array of strings.

Use the filter() array method to only keep the names that include the letter "e" followed by a map() array method call to generate an array of template results to place in the component's template.

// my-element.ts
  render() {
    return html`
      ⋮
      <ul>
      ${this.names
        .filter((name) => name.match(/e/i))
        .map((name) => html`<li>${name}</li>`)}
      </ul>
    `;
  }

// my-element.js
  render() {
    return html`
      ⋮
      <ul>
      ${this.names
        .filter((name) => name.match(/e/i))
        .map((name) => html`<li>${name}</li>`)}
      </ul>
    `;
  }

Using array methods is helpful when chaining like this, but it does require the original source to be an array. Consider using the map() directive as shown in the previous step for any iterables that are not arrays.