How to organize a list according to the category and subcategory in ReactJS?

Question

I'm a JavaScript beginner and also ReactJS.

I am doing an exercise just to improve my knowledge. This exercise is a list of investment funds. I render this list and display some details about each investment fund.

What I'm trying to do now is to organize this list according to its respective category and subcategory. Showing a piece in the list in the image below, you can see that I render a list, and that each item in that list has a category and a subcategory.

I tried using reduce, but I really didn't understand how it works and I couldn't apply the examples I saw on the internet. To organize the list as it is now, I used the .map().

Here's my code I put into codesandbox

Here's the Gist I'm using to get the list

Can you tell me how to organize/list each investment fund according to its category and subcategory?

Thank you in advance.

Answer 1

We can use Array.reduce to group the funds by Category or by Category and Subcategory, this will create objects keyed on these properties.

Once we have funds grouped by category, we could display only those in a given group, e.g.

groups["Renda Variável"]

We can also use Array.sort to sort by any property (or combination of properties).

Also, if you only want funds for a given category you can use Array.filter, like so:

// Show only funds from "Estratégias Diferenciadas"
console.log("Desired category:", funds.filter(fund => fund.Category === "Estratégias Diferenciadas"));

For example (I've selected 20 random items from all the funds here):

let funds = [{"Category":"Renda Variável","SubCategory":"Valor Long Only","Name":"Normandia Institucional Fundo de Investimento em Cotas de Fundo de Investimento em Ações","Type":"Ações"},{"Category":"Renda Fixa","SubCategory":"Crédito Privado","Name":"Fundo de Investimento Vinci Renda Fixa Crédito Privado","Type":"Renda Fixa"},{"Category":"Renda Variável","SubCategory":"Valor Plus","Name":"Novus Ações Institucional Fundo de Investimento em Cotas de Fundos de Investimento em Ações","Type":"Ações"},{"Category":"Renda Fixa","SubCategory":"Cotas de FIDCs Próprios","Name":"SRM Exodus 60 Fundo de Investimento em Cotas de Fundos de Investimento Multimercado - Créd. Priv.","Type":"Multimercado"},{"Category":"Estratégias Diferenciadas","SubCategory":"Estratégia Específica - Investimento no Exterior","Name":"Exploritas Alpha America Latina Fic de Fi Multimercado","Type":"Multimercado"},{"Category":"Estratégias Diferenciadas","SubCategory":"Long & Short Direcional","Name":"3R Genus Hedge Fundo de Investimento Multimercado","Type":"Multimercado"},{"Category":"Renda Variável","SubCategory":"Equity Hedge/Long Biased","Name":"NCH Maracanã Long Short Select Fundo de Investimento de Ações","Type":"Ações"},{"Category":"Renda Variável","SubCategory":"Valor Plus","Name":"Perfin Institucional Fundo de Investimento em Cotas de Fundos de Investimento em Ações","Type":"Ações"},{"Category":"Renda Fixa","SubCategory":"Renda Fixa","Name":"Brasil Plural Yield Fundo de Investimento Renda Fixa Referenciado DI","Type":"Renda Fixa"},{"Category":"Renda Fixa","SubCategory":"Crédito Privado","Name":"Augme 45 Fundo de Investimento em Cotas de Fundos de Investimento multimercado Crédito Privado","Type":"Renda Fixa"},{"Category":"Renda Fixa","SubCategory":"Crédito Privado","Name":"Daycoval Classic Fundo de Investimento Renda Fixa Crédito Privado","Type":"Renda Fixa"},{"Category":"Renda Fixa","SubCategory":"Crédito Privado","Name":"BNP Paribas Match DI Fundo de Investimento Renda Fundo de Investimentoxa Referenciado Crédito Privado","Type":"Renda Fixa"},{"Category":"Renda Fixa","SubCategory":"Direitos Creditórios","Name":"Fundo de Investimento em Direitos Créditorios TG Real","Type":"Direito Creditório"},{"Category":"Renda Fixa","SubCategory":"Crédito Privado","Name":"Leste Credit Brasil Fundo de Investimento em Cotas de Fundos de Investimento Multimercado Crédito Privado","Type":"Multimercado"},{"Category":"Renda Variável","SubCategory":"Valor Plus","Name":"Rio Bravo Fundamental Fundo de Investimento em Ações","Type":"Ações"},{"Category":"Estratégias Diferenciadas","SubCategory":"Estratégia Específica - Investimento no Exterior","Name":"NW3 Event Driven Fundo de Investimento em Cotas de Fundos de Investimento Multimercado","Type":"Multimercado"},{"Category":"Renda Fixa","SubCategory":"Cotas de FIDCs Multigestor","Name":"Solis Capital Antares Crédito Privado - Fundo de Investimento em Cotas de Fundos de Investimento Multimercado - Longo Prazo","Type":"Multimercado"},{"Category":"Estratégias Diferenciadas","SubCategory":"Macro Valorização","Name":"Adam Macro Strategy II Fundo de Investimento em Cotas de Fundos de Investimento Multimercado","Type":"Multimercado"},{"Category":"Renda Fixa","SubCategory":"Cotas de FIDCs Próprios","Name":"Valora Guardian Fundo de Investimento em Cotas de Fundos de Investimento Multimercado Crédito Privado","Type":"Multimercado"},{"Category":"Estratégias Diferenciadas","SubCategory":"Long & Short Neutro","Name":"Távola Long & Short Fundo de Investimento Multimercado","Type":"Multimercado"}]

console.log("Funds grouped by Category:", funds.reduce((groups, fund) => {
    // We use this key to group funds, we could make it anything, e.g. Name etc.
    let key = fund.Category;
    groups[key] = [...(groups[key] || []), fund];
    return groups;
}, {}));

console.log("Funds grouped by Category, Subcategory:", funds.reduce((groups, fund) => {
    // We use this key to group funds, in this case we're grouping by Category and SubCategory
    let key = fund.Category + ", " + fund.SubCategory;
    groups[key] = [...(groups[key] || []), fund];
    return groups;
}, {}));

console.log("Funds sorted by Category:", [...funds].sort((a, b) => a.Category > b.Category ? 1: -1));
console.log("Funds sorted by Category, SubCategory:", [...funds].sort((a, b) => { 
    if (a.Category !== b.Category) { 
        return a.Category > b.Category ? 1: -1;
    }
    return a.SubCategory > b.SubCategory ? 1: -1;
}));