In this episode, we add the ability to switch between notes in our note-taking app. Right now, the current note that's displayed in the editor is tied to the current note ID stored in our central store. Our goal is to let users click on any note from the list and instantly switch to editing that note.
We walk through adding an event handler to the note list items. Thanks to how the HTML structure and Tailwind are set up, you can click pretty much anywhere on the note item, and it will trigger the handler. With one small change, we set the store's current note ID to the ID of the clicked note. This immediately tells the editor to show the right note data.
You’ll see it in action: when we click on another note, the editor updates to show it. And when a note is edited, it moves straight to the top of the list, reflecting the updated timestamp-based ordering. By the end of the episode, clicking around and editing is feeling really smooth, and you can instantly jump between notes – it’s coming together nicely!
As a final note, there’s a quick discussion about whether to call a store method to change the note, or just set the value directly. For this small app, doing it directly is simplest.