How do I attach an event listener to the "max" Avatar in Mui's AvatarGroup?

Question

I am trying to attach an event listener to the "max" Avatar specifically in the AvatarGroup, I know I can style the element but don't have access to the element to add an onClick. Here is the code snippet -

import * as React from "react";
import Avatar from "@mui/material/Avatar";
import AvatarGroup from "@mui/material/AvatarGroup";

export default function GroupAvatars() {
  const names = [
    "Remy Sharp",
    "Travis Howard",
    "Cindy Baker",
    "Agnes Walker",
    "Trevor Henderson"
  ];
  return (
    <AvatarGroup onClick={(e) => console.log(e.currentTarget)} max={4}>
      {names.map((name, i) => {
        return <Avatar alt={name} src="/static/images/avatar/1.jpg" />;
      })}
    </AvatarGroup>
  );
}

And here is the codesandbox link https://codesandbox.io/s/fervent-curie-m43vvs?file=/src/App.js

Check this answer: https://stackoverflow.com/a/62783008/5766429 It is the same concept you are looking for. — Kareem Abdelwahed, Apr 27 '22 at 00:51

astr · Answer 1 · 2022-04-29T15:57:35.407

0

It is possible to access the outerText of the event target, so in this case can add a check to the AvatarGroup onClick function so onClick = ((e) => { if(e.target.outerText.includes('+')) doSomethingAppropriate })

edited Apr 29 '22 at 15:57

answered Apr 27 '22 at 14:27

astr

473
1
3
13

How do I attach an event listener to the "max" Avatar in Mui's AvatarGroup?

1 Answers1