Returning null when condition is met does not work

February 8, 2023

I have a problem that my data is returning empty div even if it shouldn’t display anything – causing my design to be broken.

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  const itemsToDisplay = data.slice(0, 5);
  const remainingItemsCount = data.length - itemsToDisplay.length;

  <PackedGrid boxAspectRatio={aspectRatio} className="fullscreen">
    {itemsToDisplay.map((i) => (
      <GridItemPlaceholder>{i}</GridItemPlaceholder>
    ))}
    {remainingItemsCount > 20 ? (
      <GridItemPlaceholder>+{remainingItemsCount}</GridItemPlaceholder>
    ) : null}
  </PackedGrid>`

Case above should return item 5 in the middle of the grid, but instead is on left side and that’s because remainingItemsCount are still returning an empty div on the right side of it – you can inspect to see it.

I wrote a condition that should stay null, but it does not work. I believe the issue is in the package I am using, but there has to be some solution?

Here is code example

https://codesandbox.io/s/grid-16-9-ratio-forked-5qt1rx?file=/src/App.js

>Solution :

This does the trick for you


  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  const itemsToDisplay = data.slice(0, 5);
  const remainingItemsCount = data.length - itemsToDisplay.length;
  if (remainingItemsCount > 20) {
    itemsToDisplay.push(`+${remainingItemsCount}`)
  }
  return (
    <>
      <PackedGrid boxAspectRatio={aspectRatio} className="fullscreen">
        {itemsToDisplay.map((i) => (
          <GridItemPlaceholder>{i}</GridItemPlaceholder>
        ))}
      </PackedGrid>
    </>
  );