Step 9

We need an editor similar to the one we use to add notes, for editing notes. Therefroe, let's reuse the AddNote component to server both purposes. First, refactor the code by renaming AddNote to UpsertNote. The word "upsert" is a made up word (combination of update and insert) in the field of computing and databases. It means to insert rows into a database table if they do not already exist, or update them if they do. As you rename the component, make sure all reference to it are updated accordingly.

Moreover, for consistency, update the prop's name addNote to upsertNote:

          <Route path="/add">
-           <UpsertNote addNote={this.addNote} />
+           <UpsertNote upsertNote={this.addNote} />
          </Route>

  handleSubmit = (event) => {
    event.preventDefault();
-    this.props.addNote(this.state);
+   this.props.upsertNote(this.state);
    this.props.history.push("/");
  };

Save the files and run the app. Make sure the refactoring have not changed the behaviour of the application.