I'd like to map out an array from a backend API call.
This comes from a schema which currently has the format of
teamMemberDetails: {
member_v2: {
memberEmail: [String], default: [],
memberName: [String], default: [],
memberID: [String], default: [],
memberRole: [String], default: ""
},
},
Within this, I have an object, however it looks like this for example:
"member_v2": {
"memberEmail": [
"natx@hotmail.com",
"sebaxo4897@ukgent.com"
],
"memberID": [
"62fe3c888e2776ef3c1a010f",
"6301dcd00e05d7cd322cc45b"
],
"memberName": [
"Natx Trial",
"sebaxo"
],
"memberRole": [
"QA Tester",
"trialer"
]
},
Given the above, i'd like to map through this data on a component. I have tried to store it into a const, then map however it will error out. For example:
const CompanyUserMembers = () => {
const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2)
console.log(companyFull)
return (
<GeneralContainer>
{companyuserMembers.map(member=>(
<TeamMemberCard member={companyFull} key={companyFull.memberID}/>
))}
</GeneralContainer>
)
}
export default CompanyUserMembers
This is then passed to a component which displays each user in the card. What am I doing wrong and how should i reformat?
Hi the first thing i can notice from your code you declare "comapnyFull" and you are iterating over "companyMembers"
the code should be:
const CompanyUserMembers = () => {
const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2)
console.log(companyFull)
return (
<GeneralContainer>
{companyFull.memberName.map(member=>(
<TeamMemberCard member={member} key={member}/>
))}
</GeneralContainer>
)
}
export default CompanyUserMembers
however i'm not sure that is what you are looking for, your arrays access should be:
companyFull["memberName"].map(...) // Would give you ["Natx Trial", "sebaxo"]
companyFull["memberID"].map(...) // Would give you ["62fe3c888e2776ef3c1a010f","6301dcd00e05d7cd322cc45b"]
or
companyFull.memberName.map(...) // Would give you ["Natx Trial", "sebaxo"]
companyFull.memberID.map(...) // Would give you ["62fe3c888e2776ef3c1a010f","6301dcd00e05d7cd322cc45b"]
if you want to iterate over one param, and get something from another param you do it like that:
{companyFull["memberName"].map((name, i) => (
<TeamMemberCard member={name} key={companyFull["memberID"][i]}/>
))}
Hope it makes it more clear
Based on comments member_v2 remap to array:
const member_v2 = {
"memberEmail": [
"natx@hotmail.com",
"sebaxo4897@ukgent.com"
],
"memberID": [
"62fe3c888e2776ef3c1a010f",
"6301dcd00e05d7cd322cc45b"
],
"memberName": [
"Natx Trial",
"sebaxo"
],
"memberRole": [
"QA Tester",
"trialer"
]
}
const CompanyUserMembers = () => {
const members = useMemo(() => {
const array = [];
for (let i = 0; i < member_v2.memberEmail.length; i++)
array.push({memberEmail:member_v2.memberEmail[i], memberID: member_v2.memberID[i], memberName: member_v2.memberName[i],memberRole:member_v2.memberRole[i]});
return array;
}, [member_v2])
console.log(members)
...
return (
{members.map(member => (...))}
)
}
using destructure and combining in compcode
const CompanyUserMembers = () => {
const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2)
const { memberEmail, memberID, memberName, memberRole} = companyFull;
return (
...
{memberEmail.map((_, index) => (
<TeamMemberCard memberEmail={memberEmail[index]} key={memberID[index]} memberName={memberName[index]} memberRole={memberRole[index]}/>
))}
...
)
}