Refactoring the TweetList component

The TweetList component renders a list of tweets. Each tweet is a Tweet component that a user can click on to remove it from a collection. Does it sound to you like it could make use of CollectionActionCreators?

That’s right. Let’s add the CollectionActionCreators module to it:

import CollectionActionCreators from ‘../actions/CollectionActionCreators’;

Then, we’ll create the removeTweetFromCollection() callback function that will be called when a user clicks on a tweet image:

removeTweetFromCollection = tweet => {
  CollectionActionCreators.removeTweetFromCollection(tweet.id);
}

As you can see, it creates a new action using the removeTweetFromCollection() function by passing the tweet ID as an argument to it.

Finally, we need to make sure that removeTweetFromCollection() is actually called. In the getTweetElement() method, find the following line:

const { tweets, onRemoveTweetFromCollection } = this.props;

Now replace it with the following code:

const { tweets...