Uneven distribution of masonry items with conditional rendering

[harrysolovay]

I have the content inside of the masonry rendered like this:

  {
    items.map((item, i) => {
      return (
        this.state.filter === 'ALL' ||
        item.filter === this.state.filter
      ) ? (
          <Item
            { ...item }
            key={ i }
          />
        ) : null
    })
  }

When a filter is applied (state change), there is no redistribution of the items between different columns... it's uneven. Would solving this problem require JS?

[paulcollett]

interesting use case. I'll have to look into further and see if the solution lives within the library but I'm feeling like his may be a limitation in how React notifies outer components of child element updates.

To further help React update elements correctly you could pass a unique key="" instead of the index which may solve the sorting issue your seeing. Something like:

<Item
     { ...item }
      key={ item.id }
/>

[nativ3-io]

I also have same issue. I have an array with lazy loading image and on scroll dynamic populate