Render data from array of object based on a particular property as a heading in React

Issue

I have an array of object like below -

{
   name:"Thor",
   universe:"Marvel",
   type:"God"
},
{
   name:"Batman",
   universe:"DC",
   type:"Human"
},
{
   name:"Iron man",
   universe:"Marvel",
   type:"Human"
},
];

Now, let's suppose that I want to render the objects such that the details of type Human are together, and the details of type God are together.

Basically, I want to display data based on the type property like below -

**Human**
name: Batman   universe:DC
name: Iron man universe:Marvel

**God**
name: Thor universe: Marvel

Solution

I can help you with classification. You can do render your self.

const data=[{
   name:"Thor",
   universe:"Marvel",
   type:"God"
},
{
   name:"Batman",
   universe:"DC",
   type:"Human"
},
{
   name:"Iron man",
   universe:"Marvel",
   type:"Human"
},
];
const category={};
for(let i of data){
category[i.type]??=[]
category[i.type].push(i)
}

Category like:

{
   "God":[
      {
         "name":"Thor",
         "universe":"Marvel",
         "type":"God"
      }
   ],
   "Human":[
      {
         "name":"Batman",
         "universe":"DC",
         "type":"Human"
      },
      {
         "name":"Iron man",
         "universe":"Marvel",
         "type":"Human"
      }
   ]
}

Answered By - Chang Alex