-4
votes

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.