React TransitionGroup children based on state

Question

At the moment I have a number of the same component that is rendered from a map like so:

{this.state.Tweets.map(t => <Tweet key={t.title} title={t.title} desc={t.desc} />)}

So what I've done is wrapped the entire map object with a transition as such:

<TransitionGroup> {this.state.Tweets.map(t => <Tweet key={t.title} title={t.title} desc={t.desc} />)} </TransitionGroup>

this.state.tweets is updated with the following:

filterTweets() {
  const t = this.state.tweets;
  const filteredTweets = _.filter(t, tweet => tweet.time.end > this.state.time);
  this.setState({ tweets: filteredTweets });
}

However when this.state.Tweets is updated for whatever reason the number of items within the <TransitionGroup> does not update. I can get componentWillEnter lifecycle hook to fire but I can't get anything else to update. Any ideas?

I've tried adding this.state.Tweets as a prop to <TransitionGroup> but that didn't seem to work at all.

@Turnipdabeets I've updated my post to include how I'm updating this.state.Tweets — ajames, Mar 02 '17 at 19:00
Wouldn't you want `this.setState({ tweets: filteredTweets });` instead of `this.setState({ tweets: filtered });` ? — Turnipdabeets, Mar 02 '17 at 19:05
@Turnipdabeets Ah yes. Thats just an error with my StackOverflow example. Sorry about that. — ajames, Mar 02 '17 at 19:06
It might not be that helpful but I'd try pulling the map logic out into a variable and place that inside ``. Probably won't do anything but maybe there's something strange happening in . Then I'd console.log everything to follow this.state.tweets to see what happens. maybe something async is happening? — Turnipdabeets, Mar 02 '17 at 19:38

score 0 · Answer 1 · answered Mar 02 '17 at 19:57

0

Actually I had missed a crucial role of the TransitionGroup:

Note that you must call the supplied callbacks after your animation ends, otherwise your component will enter but not leave, or leave but not enter.

answered Mar 02 '17 at 19:57

ajames

113
4

React TransitionGroup children based on state

1 Answers1