From 8dcede116e2b60af922424410ea03a55b172d323 Mon Sep 17 00:00:00 2001
From: brian <brian@sakal.us>
Date: Wed, 10 Mar 2021 13:45:45 -0500
Subject: [PATCH] keyed every element for efficiency

---
 App.js    | 20 ++++++++++----------
 Note.js   |  4 ++--
 README.md |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/App.js b/App.js
index 15b753c..3693b72 100644
--- a/App.js
+++ b/App.js
@@ -15,24 +15,24 @@ const notes = [
   {id: 'ggg', text: 'Note seven'},
   {id: 'hhh', text: 'Note eight'}
   ];
-return m('.app', [
-  m('.top', [
-    m('.top-left', [
+return m('.app', {key: 'app'}, [
+  m('.top', {key: 'top'}, [
+    m('.top-left', {key: 'top-left'}, [
       m('button', {key: 'button'}, 'New Note...'),
       m('input.search', {key: 'search', value: ''}),
       m('select.sorting', {key: 'sorting'}, [
-        m('option', 'Newest -> Oldest'),
-        m('option', 'Oldest -> Newest')
+        m('option', {key: 'new-old'}, 'Newest -> Oldest'),
+        m('option', {key: 'old-new'}, 'Oldest -> Newest')
         ])
       ]),
-    m('.top-right', [
-      m('.bin-id', bin.id),
-      m('button', 'New Bin...')
+    m('.top-right', {key: 'top-right'}, [
+      m('.bin-id', {key: 'bin-id'}, bin.id),
+      m('button', {key: 'new-bin-button'}, 'New Bin...')
       ])
     ]),
-  m('.main', [
+  m('.main', {key: 'main'}, [
     m('.notes', notes.map(note =>
-      m(Note, {note})
+      m(Note, {note, key: note.id})
       ))
     ])
   ]);
diff --git a/Note.js b/Note.js
index 8b4f3ad..5c41ff8 100644
--- a/Note.js
+++ b/Note.js
@@ -3,8 +3,8 @@ return {
 view: function(vnode){
 const {note} = vnode.attrs;
 return m('.note', [
-  m('.text', note.text),
-  m('button', 'Edit')
+  m('.text', {key: 'text'}, note.text),
+  m('button', {key: 'edit-button'}, 'Edit')
   ]);
 }
 };  
diff --git a/README.md b/README.md
index cd6f28f..4eb25cf 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,6 @@ Clicking "New Note..." clears the search and sort, so the new note comes out fir
 
 ## TODO
 
-- key everything for efficiency
 - provide handlers for events
-- get/set state from/to server
\ No newline at end of file
+- get/set state from/to server
+- add paging
\ No newline at end of file