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 code:
handleFormSubmit: function (event) {
event.preventDefault();
var collectionName = this.state.inputValue;
this.props.onChangeCollectionName(collectionName);
},We change it to this code snippet:
handleFormSubmit: function (event) {
event.preventDefault();
var collectionName = this.state.inputValue;
CollectionActionCreators.setCollectionName(collectionName);
this.props.onCancelCollectionNameChange();
},The important difference here is that when a user submits a form, we create a new action that sets a new name in our collection store:
CollectionActionCreators.setCollectionName(collectionName);
Finally, we need to change the source of the collection name in the handleFormCancel() method:
handleFormCancel: function (event) {
event.preventDefault();
var collectionName = this.props.name;
this.setInputValue(collectionName);
this.props.onCancelCollectionNameChange();
}We change it to the following code:
handleFormCancel: function (event) {
event.preventDefault();
var collectionName = CollectionStore.getCollectionName();
this.setInputValue(collectionName);
this.props.onCancelCollectionNameChange();
}Once again, we get the collection name from a collection store:
var collectionName = CollectionStore.getCollectionName();
That's all we need to change in the CollectionRenameForm component. Let's refactor the TweetList component next.