Step 10

Add an editNote method to App.js:

editNote = (note) => {
  this.setState((state) => {
    return {
      notes: state.notes.map(n => n.id === note.id ? note : n),
    };
  });
};

Next, add another "route" to the App component:

<Route path="/edit">
  <UpsertNote upsertNote={this.editNote} />
</Route>

Next, update the Note.js file:

1. Import the Link component from react-router:

   import { Link } from "react-router-dom";
   

2. Right before the delete button, add a new button to navigate to the /edit page:

    <ListItemIcon>
      <Link
        to={{
          pathname: "/edit",
          search: `?id=${note.id}`,
          state: { title: note.title, text: note.text, id: note.id },
        }}
      >
        <Button>
          <Edit />
        </Button>
      </Link>
    </ListItemIcon>
   

Note we pass an object to the Link component's to prop. This object has the following properties:

• pathname: A string representing the path to link to.
• search: A string representation of query parameters.
• state: State to persist to the location.

Finally, open the UpsertNote.js and add the following log statement to the render method:

    render() {
+     console.log(this.props);
      return ( /* not shown to save space */ );
    }

Save the changes and revisit the running React app. Next, open the browser console, and click on the edit icon for any displayed notes.

Notice how the URL had changed when you clicked on the edit icon. Moreover, notice the props printed on the console. In particular, the props.location.state contains the notes data!