I am using this react masonry component
I am displaying my masonry tiles from a filtered array.
var myFilteredArray = myArray.filter( (tile) => this.props.filter.indexOf(tile.tag) > -1 )
var tiles = myFilteredArray.map( (tile) => <MyTile/>)
Where myArray is an array of json objects with a tag field. props.filter is an array of strings.
For exampleprops.filter = ["a","b","c"] and the json tags are "a", "b", "c"
When I update my props filter so that props.filter = ["b"]
I see that the A and C objects disappear and object B moves to the left most of the container.
However when I add back tags "a" and "c" into props.filter, the objects show up in the wrong position. I would expect that the objects be in the order A,B,C, and filling up the container from the left most. What I see however is that object B goes back to where it was originally, and A, and C show up either on top of it or to the right of is. That means there is a big empty space to the left of Object B
My question is why is this happening? And how do I fix this?
As per @mattclemens suggested, it may be a problem with the algorithm for where things are placed.
It looks like this is already recorded here: https://github.com/eiriklv/react-masonry-component/issues/11
The hacky solution is to put a dummy div first that has 1 width and 0 height in pixel (or vice versa).