The mapping works so far. The problem I have is that I don't really need the middle array or its return. I want a stack with multiple avatars depending on the number of friends. I currently get everything twice.
<React.Fragment>
{eintrag.kalenderEinträge ? (
eintrag.kalenderEinträge.map((e, i) => {
var d1 = tag;
var d2 = Moment(e.datum).format("L");
if (d1 === d2) {
return e.freunde?.map((f, i) => {
return (
<Stack
spacing={1}
sx={{
marginTop: 3,
backgroundColor: "rgba(39, 187, 245, 0.05)",
}}
m={2}
>
<Box sx={{ display: "flex" }} p={1}>
<AvatarGroup max={2}>
{e.freunde?.map((f, i) => {
let img = `data:${f.typ};base64,${f.bild}`;
return (
<Avatar
alt={f.name}
src={img}
sx={{
width: 56,
height: 56,
}}
/>
);
})}
</AvatarGroup>
...