Step 8

Add the following method to the App component:

  addNote = (note) => {
    this.setState((state) => {
      return {
        notes: [...state.notes, note],
      };
    });
  }

Pass the addNote method to the AddNote component as a prop:

<AddNote />
<AddNote addNote={this.addNote} />

Next, update the AddNote.handleSubmit method:

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

Save the files and try to add a note in the app!

We must update the app to generate a suitable ID for newly created notes.

Stop the app and install the uuid library as a dependency.

npm install uuid

Next, import it in the App.js file:

import { v4 as uuidv4 } from "uuid";

Finally, update the addNote method:

  addNote = (note) => {
    this.setState((state) => {
      return {
-       notes: [...state.notes, note],
+       notes: [...state.notes, Object.assign(note, { id: uuidv4() })],
      };
    });
  }