title: Render unique initials in a list
body: <p>I want to write unique initials before listing an array of names, so given
  const names = [&quot;Bill&quot;, &quot;Jack&quot;, &quot;john&quot;], I would like to print something like:</p>
  <pre><code>&lt;ul&gt;
      &lt;li&gt;B
          &lt;ul&gt;
              &lt;li&gt;Bill&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;J
          &lt;ul&gt;
              &lt;li&gt;John&lt;/li&gt;
              &lt;li&gt;jack&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>The way I found to do this is to push the JSX into an array before rendering it like:</p>
  <pre><code>    const RenderNames = () =&gt; {
          let initials = [];
          let renderData = [];
          names.forEach(name =&gt; {
              let initial = name.charAt(0).toUpperCase();
              if(initials.indexOf(initial) === -1){
                  initials.push(initial)
                  renderData.push(&lt;li&gt;{initial}&lt;/li&gt;)
              }
              renderData.push(&lt;li&gt;{name}&lt;/li&gt;)
          });
          return &lt;ul&gt;{renderData}&lt;/ul&gt;;
      }
  </code></pre>
  <p>But I feel the code is a bit clunky, and I can only push in tags that are immediately closing. Is this the best way to do things or could it be done better?</p>