wadackel / react-stack-grid

Pinterest like layout components for React.js
https://wadackel.github.io/react-stack-grid/
MIT License
870 stars 77 forks source link

removing items gracefully? #28

Closed meds closed 7 years ago

meds commented 7 years ago

From the demo page there's a really nice animation which plays when an item is removed: https://tsuyoshiwada.github.io/react-stack-grid/#/

I wanted to know how I can accopmplish this?

My setup looks something like this:

//render function:
let items: JSX.Element[] = [];
// populate items from this.props.items
 <StackGrid> {items} </StackGrid>

and I remove entries from this.props.items and re-render. However if I want to delete an item from the middle the entire list repopulates making me think there's a better way to do this given the demo page

meds commented 7 years ago

No sooner had I posted this I realized I needed to set a key value on the JSX.Elements like so:

<div key={id}> </div>

and everything fell into place.

So simple and straight forward, I feel a bit dumb for assuming there's a more complicated way to accomplish this.