Group by Data Field - reactjs

Question

I have a list component contains SUBJECT, NO, DESCRIPTION fields. For example: ACC 121, descr.., ACC 121 descr..., ACC 122 descr... ACC 211 desc.... How do I group by the same SUBJECT and NO in tag and DESCRIPTION in sub components?
Courses=[{id:1, SUBJECT: ACC, NO:121,DESCR: 'class description1'},
{id:2, SUBJECT:ACC, NO:121, DESCR:'class description2'},
...]
const CourseList=({Courses, onCourseSelect})=>{
const renderedList= Courses.map(course=>{
return (
//add <h2>{course.SUBJECT} {course.NO} ???
<CourseItem key={course.ID} descr={course.DESCR} onCourseSelect={onCourseSelect} ></CourseItem>
);
})
return <div className="List ui relaxed divided list">
{renderedList}</div>
}
-----EDITED CODE
var _ = require('lodash');
const CourseList=({Courses, onCourseSelect})=>{
let renderedList = _.groupBy(Courses, 'SUBJECT','NO');
console.log(renderedList);
object list like below:
ACC: (26) […]
0: Object { ID: 1079, DESCR: "class description1", … }
1: Object { ID: 1080, DESCR: "class description2", … }
2: Object { ID: 1081, DESCR: "class description3",...}
​​
How to render each object? I tried:
return <div>
{Object.keys(renderedList).map(key => (
{renderedList["SUBJECT"]}
</div>
but it does not work. Thanks.

Answer 1

The Idea is to do something like this. Create a helper function to restructure the data into a multidimensional array by grouping them so that each array in the multidimensional array holds records about courses with the same id. then loop through the multidimensional array and perform whatever logic you want to.
let courses=[{id:1, SUBJECT: "ACC", NO:121,DESCR: 'class description1'},
{id:2, SUBJECT:"ACC", NO:121, DESCR:'class description2'},
...]
//Where ever we want to print the first group we just need to call the CourseList with a single input from the multidimentional structured array asonst
CourseList=(courses, onCourseSelect)=>{
//create another variable to hold the structured data
//this ensures that each key in the array is it self another array holding all the courses with that same id.
let structuredData = new Array();
courses.map(course => structuredData[course.id] = (courses.filter(co =>(co.id == course.id ))))
<div className="List ui relaxed divided list">
structuredData.map((data, k) => {
//each iteration over data is printing for a single group
console.log("Group", k)
data.map(course=>
<CourseItem key={course.id} descr={course.DESCR} onCourseSelect={onCourseSelect} />
)
})
</div>
}