Book Image

React.js Essentials

By : Artemij Fedosejev
Book Image

React.js Essentials

By: Artemij Fedosejev

Overview of this book

Table of Contents (18 chapters)
React.js Essentials
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 like it could make use of CollectionActionCreators to you?

That's right, let's add the CollectionActionCreators module to it:

var CollectionActionCreators = require('../actions/CollectionActionCreators');

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

removeTweetFromCollection: function (tweet) {
  CollectionActionCreators.removeTweetFromCollection(tweet.id);
},

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

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

var handleRemoveTweetFromCollection = this.props.onRemoveTweetFromCollection;

Now, we replace it with...