Something like this https://codesandbox.io/s/l765q6lmrq?file=/HOC.js and i have the data in this format
let classAndSection1 = [
{
"id": 11,
"instituteId": 17,
"classId": 69,
"sectionId": 71,
"className": "1",
"sectionName": "A",
"students": [
{
"userId": 143,
"userName": "[email protected]",
"userFullName": "Ruby Regal",
"fatherName": "Rohan",
"motherName": "Mia",
"dateOfBirth": "2014-06-11T16:51:00",
"joiningDate": "2021-05-15T11:22:44",
"instituteId": 17,
"instituteName": "Chistiya International School, Varthur",
"usertypeId": 60,
"usertype": "Student",
"classId": 69,
"className": "1",
"sectionId": 71,
"sectionName": "A",
"rollNumber": "02"
},
{
"userId": 142,
"userName": "[email protected]",
"userFullName": "Sam Smith",
"fatherName": "Ron",
"motherName": "Mia",
"dateOfBirth": "1996-10-04T00:00:00",
"joiningDate": "2021-05-15T10:56:08",
"instituteId": 17,
"instituteName": "Chistiya International School, Varthur",
"usertypeId": 60,
"usertype": "Student",
"classId": 69,
"className": "1",
"sectionId": 71,
"sectionName": "A",
"rollNumber": "01"
}
]
},
]
each class should be selectable and students should lay inside the class. can anyone help me with this im really struggling to start this.