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, import the CollectionActionCreators and CollectionStore modules:

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

Now, we need to remove its existing constructor() method:

constructor(props) {
  super(props);

  const { name } = props;

  this.state = {
    inputValue: name
  };
}

Replace the preceding code with the following:

state = {
  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...