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


CollectionRenameForm is a controlled form component. This means that its input value is stored in the component's state, and the only way to update that value is to update the component's state. It has the initial value that it should get from CollectionStore, so let's make that happen.

First, we need to import the CollectionActionCreators and CollectionStore modules:

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

Now, we need to update the getInitialState() method as follows:

getInitialState: function() {
  return {
     inputValue: this.props.name
  };
},

Now we change it to this code snippet:

getInitialState: function() {
  return {
    inputValue: CollectionStore.getCollectionName()
  };
},

As you can see, the only difference is that now we get the initial inputValue from CollectionStore.

Next, let's update the handleFormSubmit() method by using the following...