title: lit-element: can't get an array of objects to render output in loop
body: <p>Just starting with lit-element</p>
  
  <p>in my render i have:</p>
  
  <pre><code>  return html`
     ${this.jobCreate}
     ${this.jobDetails}
    `;
  </code></pre>
  
  <p>get jobCreate works fine</p>
  
  <p>this is my get jobDetails:</p>
  
  <pre><code>  get jobDetails() {
      const jobs = [
        { name: "phoenix job", location: "phoenix", expires: "2020-10-01" },
        { name: "chicago job", location: "chicago", expires: "2020-10-01" },
        { name: "pittsburgh job", location: "pittsburgh", expires: "2020-10-01" },
      ];
  
      return html`&lt;ul&gt;
        ${jobs.forEach((job) =&gt; html`&lt;li&gt;${job.name}&lt;/li&gt;`)}
      &lt;/ul&gt;`;
    }
  </code></pre>
  
  <p>inspecting the element i can see an empty <code>&lt;ul&gt;</code> set</p>
  
  <p>if do a <code>&lt;ul&gt;&lt;li&gt;${jobs[2].name}&lt;/li&gt;&lt;/ul&gt;</code> that works</p>
  
  <p>if i console out job, i can see all the right job print 3 times in the loop</p>
  
  <p>I can't understand why i can't get the <code>&lt;li&gt;</code> to render in the loop</p>
  
  <p>i used this for reference: <a href="https://lit-element.polymer-project.org/guide/templates#template-syntax-cheat-sheet" rel="nofollow noreferrer">https://lit-element.polymer-project.org/guide/templates#template-syntax-cheat-sheet</a></p>