title: Mapping an object and then setting innerHTML on the page results in commas between items
body: <p>Im mapping an object so that I can pull out some of its items and add HTML around them. Im then writing this to the page.</p>
  
  <p>This is working except that the page has commas after each item. How can I remove these commas? </p>
  
  <pre><code>const input = document.querySelector('.search-form input');
    const shownResults = document.querySelector('.suggestions');
    let searchQuery = "";
  
  
    const updatepage = function (filteredCities) {
      let filteredCitiesHtml = filteredCities.map((item) =&gt; {
        return `&lt;li&gt;${item.city} - ${item.state}&lt;/li&gt;`;
      });
  
      shownResults.innerHTML = filteredCitiesHtml;
      console.log(filteredCitiesHtml);
    };
  
    const filterCities = () =&gt; {
      const filteredCities = cities.filter((item)=&gt; {
        if (
          item.state.toLowerCase().includes(searchQuery) ||
          item.city.toLowerCase().includes(searchQuery)
          ) {
          return true;
        }
      });
      updatepage(filteredCities);
    };
  
    // func to search list for string
    const getSearchQuery = function () {
      searchQuery = input.value.toLowerCase();
      filterCities();
    };
  
    input.addEventListener('keyup', getSearchQuery);
  </code></pre>