Map a React component with different keys - reactjs

Question

I want to load components but it shows a problem that the components with the same key but I maped on selectedGroups and gave gr.id as a key it worked before the first version is
sharingTabs = selectedGroups.map(gr => (
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>{gr.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={16}>
<Grid item xs>
<SharingSpacesTabs />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
));
but then I wanted to send the index in a props that's why I added another map inside the map that's what caused the problem of call back function and I aded return
sharingTabs = selectedGroups.map(function(gr) {
const indexs = groups.map((group, index) => {
if ((group.sharingspace.element = gr.id)) {
return index;
}
});
return (
<ExpansionPanel key={gr.id}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>{gr.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={16}>
<Grid item xs>
<SharingSpacesTabs id={gr.id} index={indexs[0]} />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
});
could you please help me find a solution I need it and thank you

Answer 1

I think you have problem in your condition, Change you function condition to properly check the equality with == or ===.
Also I am not sure what you want to do if the condition will not satisfied, map will return null for every element which does not satisfy the condition.
const indexs = groups.map((group, index) => {
if ((group.sharingspace.element == gr.id)) {
return index;
}
});

Answer 2

the best way to do it is to pass a second index as a second parameter in map and make the key={index}
sharingTabs = selectedGroups.map((gr, index) => {
const indexes = groups.map((group, index) => {
if ((group.sharingspace.element = gr.id)) {
return index;
}
});
return (
<ExpansionPanel key={index}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>{gr.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={16}>
<Grid item xs>
<SharingSpacesTabs id={gr.id} index={indexes[0]} />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
});