Elements are in wrong position on a 're-render' caused by unfiltering a filtered array

[terencechow]

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?

[terencechow]

Looks like this is related to #11.