Как это сделать или как называется этот эффект? (изображение в описании)

Question

Мне нужно сделать этот подвиг. Если в нем более 3 изображений, он поместит четвертое изображение с оставшимся количеством изображений. В настоящее время я кодирую в reactjs.

Код:

<Speaker>
 {event.speakers.map((speakerItem) => {
  return <img src={speakerItem.photo} />
 })}
</Speaker>

в стиле styled-components

export const Speaker = styled.div`
  margin-left: 10px;

  img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 22px;
    border: 2px solid #fff;
    margin-left: -10px;
  }
`;

Answer 1

Вы можете попробовать что-то с таким кодом:

<Speaker>
 {event.speakers.map((speakerItem, index) => {
   if (index < 3) {
       return <img src={speakerItem.photo} />
   } else if (index === 3) {
      return <MyBubble count={speakerItem.length - 3} />
   }

 })}
</Speaker>

Где MyBubble - это пользовательский компонент, который отображает оставшееся число ...