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 StreamTweet component


StreamTweet renders a tweet image that a user can click on to add it to a collection of tweets. You might have already guessed that we're going to create and dispatch a new action when a user clicks on that tweet image.

First, we import the CollectionActionCreators module to the StreamTweet component:

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

Then, we add a new addTweetToCollection() method to it:

addTweetToCollection: function (tweet) {
  CollectionActionCreators.addTweetToCollection(tweet);
},

The addTweetToCollection() is a callback function that should be invoked when a user clicks on a tweet image. Let's take a look at this line in the render() method:

<Tweet tweet={tweet} onImageClick={this.props.onAddTweetToCollection} />

We replace it with this line of code:

<Tweet tweet={tweet} onImageClick={this.addTweetToCollection} />

The StreamTweet component is done.