[material-ui][AvatarGroup] Even with null results the avatar is still counted

[paoloLigsay]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

• Use the AvatarGroup component and loop an array of avatars inside.
• Don't directly do the condition inside the AvatarGroup, instead, render a child component and pass the current avatar data.
• On the Child component, create a condition to either render the avatar or return null instead, so that the avatar won't be rendered.

Here is the Live Demo: SANDBOX-MATERIALUI-AVATAR-GROUP

Current behavior 😯

In some cases, I need to do the condition inside the child component to either render the avatar or not after fetching some data by using a hook which needs to be on the top level.

However, returning null to not render the avatar is still being counted by the avatargroup causing it to still render the + icon.

Expected behavior 🤔

Do not count the null avatars that are being returned so that the + icon will not be rendered.

Context 🔦

This makes the component look a bit buggy a it renders the + icon even without avatars. I'm not sure if this is a limitation in which we should not do it this way or if there is another approach we should be doing instead. Thank you!

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[ZeeshanTamboli]

The issue arises because in AvatarGroup, the calculation for extra avatars is based on the number of children (children.length). Your custom AvatarChecker component is treated as a valid child before the null condition is applied. I'm uncertain if we should officially support custom components inside AvatarGroup. I view this more as an enhancement rather than a bug. I'll keep this issue open, though I'm unsure if it's feasible.

[PunitSoniME]

@paoloLigsay

as @ZeeshanTamboli mentioned he sees this an enhancement rather than a bug.

in the meantime you can use below code to achieve what you want

put below code above the component
const notThese = ["W", "E", "H", "N"];

<AvatarGroup max={2}>
  {avatars
    .filter((f) => {
      if (notThese.includes(f.name)) {
        return false;
      }
      return true;
    })
    .map((avatar) => (
      <Avatar sx={{ bgcolor: "primary.main" }}>{avatar.name}</Avatar>
    ))}
</AvatarGroup>

let's see what happens next

[paoloLigsay]

Hi @ZeeshanTamboli @PunitSoniME I agree viewing this as an enhancement, since doing it without the custom component works perfectly fine. Thanks for your input!