Error when Filtering High Impact News in Masonry Layout

[Saud-Ahmad97]

Describe the bug First, thank you for this amazing package. It perfectly meets my requirements.

I am creating a news feed application where news items are displayed in cards. I am using the Masonry layout to handle the different card sizes, as some cards include images while others do not.

The Masonry layout is working well overall, but I have encountered an issue when implementing a filter functionality. The filter allows users to sort news based on their impact levels: high, medium, and low. Currently, there are 3 high-impact news items, and more than 60 items for both medium and low impact.

When switching to display only high-impact news, I encounter the following error:

` const filterByImpactHigh = filteredData?.filter((item) => item?.impact === 'High'); const filterByImpactMedium = filteredData?.filter((item) => item?.impact === 'Medium'); const filterByImpactLow = filteredData?.filter((item) => item?.impact=== 'Low');

const dataToDisplay = tab === '0' ? filteredData : tab === '1' ? filterByImpactHigh : tab === '2' ? filterByImpactMedium : filterByImpactLow;

`

` <Box sx={{ margin: '1rem 0', direction: 'rtl' }}> {dataToDisplay?.length > 0 && <Masonry items={dataToDisplay} columnGutter={10} columnWidth={250} overscanBy={1} render={({ data}: any) => {

        return (
          <>
         {data &&   <NewsCard
            key={data?.id}
            id={data?.id}
            title={data?.title}
            translated_message={data?.translated_message}
            imageUrl={data?.image_paths}
            impact_on_UAE={data?.impact_on_UAE}
            time={data?.timestamp?.$date}
            category={data?.category}
            videoUrl={data?.video_paths}
            channel_name={data?.channel_name}
          />}
          </>

        );
      }}
    />
    }
    </Box>`

Actual Behavior An error occurs when switching to the high-impact filter, preventing the news items from being displayed correctly. while switching to others work fine as long as the there is large set of data

To Reproduce

1. Implement a Masonry layout for news cards.
2. Add a filter functionality to sort news by impact levels (high, medium, low).
3. Populate the feed with 3 high-impact news items and over 60 medium and low impact news items.
4. Switch to the high-impact filter.

Expected behavior The Masonry layout should correctly display the 3 high-impact news items without any errors.

Screenshots

• OS: [macOS]
• Browser [ chrome,]

[Saud-Ahmad97]

After looking into the documentation, I was able to resolve the issue successfully.

  <Masonry
        key={tab}
        items={dataToDisplay}
        columnGutter={10}
        columnWidth={250}
          overscanBy={1}

        />

added a key prop resolved my issue👍

Thank you once again for your excellent work and comprehensive documentation!

[jaredLunde]

Awesome! I'm glad the key prop worked for you.