title: Splitting a single dynamic list in multiple lists using React?
body: <p>I am new around here. Doing my first own project with React, I am stuck to achieve this. After mapping a list using <code>.map()</code>, how can I have multiple lists split? I want them to be split by the first letter on each new <code>&lt;ul&gt;</code>, regardless the number of titles. Some titles have more than 5 or 10, for each letter. Some are not even showed, because there are no titles with that letter.</p>
  <p><strong>My code</strong></p>
  <pre><code>&lt;ul&gt;
      {list.map((i) =&gt; (
          &lt;li&gt;
             {i.title}
          &lt;/li&gt;
      ))}
  &lt;/ul&gt;
  
  </code></pre>
  <p><strong>Result</strong></p>
  <pre><code>&lt;ul&gt;
    &lt;li&gt;title aa&lt;/li&gt;
    &lt;li&gt;title ab&lt;/li&gt;
    &lt;li&gt;title ac&lt;/li&gt;
    &lt;li&gt;title ba&lt;/li&gt;
    &lt;li&gt;title bb&lt;/li&gt;
    &lt;li&gt;title bc&lt;/li&gt;
    &lt;li&gt;title ca&lt;/li&gt;
    &lt;li&gt;title cb&lt;/li&gt;
    &lt;li&gt;title cc&lt;/li&gt;
    …
  &lt;/ul&gt;
  </code></pre>
  <p><strong>Desired</strong></p>
  <pre><code>&lt;ul&gt;
    &lt;li&gt;title aa&lt;/li&gt;
    &lt;li&gt;title ab&lt;/li&gt;
    &lt;li&gt;title ac&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
    &lt;li&gt;title ba&lt;/li&gt;
    &lt;li&gt;title bb&lt;/li&gt;
    &lt;li&gt;title bc&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
    &lt;li&gt;title ca&lt;/li&gt;
    &lt;li&gt;title cb&lt;/li&gt;
    &lt;li&gt;title cc&lt;/li&gt;
  &lt;/ul&gt;
    …
  </code></pre>
  <p>Thanks for any help and possible solution.</p>