Splitting a single dynamic list in multiple lists using React? - reactjs

Question

I am new around here. Doing my first own project with React, I am stuck to achieve this. After mapping a list using .map(), how can I have multiple lists split? I want them to be split by the first letter on each new <ul>, 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.
My code
<ul>
{list.map((i) => (
<li>
{i.title}
</li>
))}
</ul>
Result
<ul>
<li>title aa</li>
<li>title ab</li>
<li>title ac</li>
<li>title ba</li>
<li>title bb</li>
<li>title bc</li>
<li>title ca</li>
<li>title cb</li>
<li>title cc</li>
…
</ul>
Desired
<ul>
<li>title aa</li>
<li>title ab</li>
<li>title ac</li>
</ul>
<ul>
<li>title ba</li>
<li>title bb</li>
<li>title bc</li>
</ul>
<ul>
<li>title ca</li>
<li>title cb</li>
<li>title cc</li>
</ul>
…
Thanks for any help and possible solution.

Answer 1

You should reduce the list values following the desired pattern, then iterate over the sub-items one by one:
const grouped = list.reduce((acc, obj) => {
const key = obj.title.charAt(6);
acc[key] = acc[key] || [];
acc[key].push(obj);
return acc;
}, {});
which will lead grouped values as follows:
{
a: [{
title: "title aa"
}, {
title: "title ab"
}],
b: [{
title: "title ba"
}, {
title: "title bb"
}],
c: [{
title: "title ca"
}, {
title: "title cb"
}]
}
You can then go through the grouped object and map to your proper layout:
Object.values(grouped).map(list => (
<ul>
{list.map((i) => (
<li>
{i.title}
</li>
))}
</ul>
});

Answer 2

It will depends on what is the condition to split your lists, but you can use reduce to generate a new list that will contains the splits that you need and then apply those splits to a new list.
function splitList(list) {
return list.reduce((acc, cur) => {
const lastSplit = acc[acc.length -1];
if(lastSplit && lastSplit[0][0] === cur[0]) {
return [...acc.slice(0, -1), [...lastSplit, cur]];
} else {
return [...acc, [cur]];
}
}, []);
}
After having your splits, you do the same thing you are doing for the li items, but for ul as well: (Replace the names of the variables)
{splitList(list).map(item) => (
<ul>
{item.map((i) => (
<li>
{i.title}
</li>
))}
</ul>
)}