I am working on a project where I have a div called ItemsContainer that dynamically renders an array of items (Item) depending on the screen size.
While mapping through the array, I want to check if there is enough space to display the current item. If not, I would like to stop rendering the items and instead add a special item that shows how many more items are in the array but not displayed. Check out the image for clarification.
This is what my code looks like so far using React with TypeScript. I haven't implemented the additional "+5" box yet because I'm unsure if it's feasible. My initial plan was to display a fixed number of items and then show the "+X" item if there are more hidden items, but I hope to find a more dynamic solution.
const Items: FC<Props> = ({ items }) => {
return (
<ItemsContainer>
{items.map((item, index) => (
<Item key={index}>{item.name}</Item>
))}
</ItemsContainer>
);
};