I need to dynamically insert a list of values as the key to be mapped over. The list here is employeeTypes. I need to map() over every role.supervisors and every role.employees..
Attempt:
export default function EmployeesByDepartmentList({ department }) {
const employeeTypes = ["supervisors", "employees"];
return (
<div className={styles.departmentSection} key={department.id}>
{department.roles.length
? department.roles.map((role) =>
employeeTypes.forEach((type) => { // this is my attempt at iterating over each item in employeeTypes to use as the role key
role[type].map((item) => (
<ListLinkItem
key={item.id}
id={item.id}
href={`employees/${item.id}/`}
>
<EmployeeImage
src={item.image}
alt={item.first_name + item.last_name}
/>
</ListLinkItem>
));
})
)
: null}
</div>
);
}
I am sure it is easy, I just can't seem to visualize what I need atm. All help appreciated!
Edit:
This is the department object:
{
"id": 2,
"roles": [
{
"id": 1,
"employees": [],
"supervisors": [
{
"id": 8,
"role": "Casino Supervisor",
"last_login": "2022-05-06T13:34:44.934187-07:00",
"is_superuser": false,
"username": "T2Admin1",
"is_staff": true,
"is_active": true,
"date_joined": "2022-04-06T19:42:22-07:00",
"first_name": "T2Admin",
"last_name": "Admin1",
"badge_num": "1234",
"email_notifications": true,
"sms_notifications": true,
"points": 0,
"image": "/media/images/profile_pics/dealer.jpg",
"supervisor": null,
"company": 2,
"groups": [
1,
3
],
"user_permissions": []
},
],
"name": "Casino Supervisor",
"supervisor": null,
"group": 1,
"company": 2
},
{
"id": 11,
"employees": [
{
"id": 4,
"role": "Dealer",
"last_login": null,
"is_superuser": false,
"username": "T2Dealer2",
"is_staff": false,
"is_active": true,
"date_joined": "2022-04-06T19:32:08-07:00",
"first_name": "T2Dealer",
"last_name": "Dealer2",
"badge_num": "1234",
"email_notifications": true,
"sms_notifications": true,
"points": 0,
"image": "/media/images/profile_pics/dealer.jpg",
"supervisor": null,
"company": 2,
"groups": [
2
],
"user_permissions": []
},
],
"supervisors": [],
"name": "Dealer",
"supervisor": null,
"group": 2,
"company": 2
}
],
"created_on": "2022-04-14T16:15:27.299700-07:00",
"updated_on": "2022-04-21T12:31:24.773872-07:00",
"name": "Casino"
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/z6cxWmK
Comments
Post a Comment