keyed every element for efficiency

App.js

@@ -15,24 +15,24 @@ const notes = [
   {id: 'ggg', text: 'Note seven'},
   {id: 'hhh', text: 'Note eight'}
   ];
-return m('.app', [
+return m('.app', {key: 'app'}, [
-  m('.top', [
+  m('.top', {key: 'top'}, [
-    m('.top-left', [
+    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', {key: 'new-old'}, 'Newest -> Oldest'),
-        m('option', 'Oldest -> Newest')
+        m('option', {key: 'old-new'}, 'Oldest -> Newest')
         ])
       ]),
-    m('.top-right', [
+    m('.top-right', {key: 'top-right'}, [
-      m('.bin-id', bin.id),
+      m('.bin-id', {key: 'bin-id'}, bin.id),
-      m('button', 'New Bin...')
+      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})
       ))
     ])
   ]);

Note.js

@@ -3,8 +3,8 @@ return {
 view: function(vnode){
 const {note} = vnode.attrs;
 return m('.note', [
-  m('.text', note.text),
+  m('.text', {key: 'text'}, note.text),
-  m('button', 'Edit')
+  m('button', {key: 'edit-button'}, 'Edit')
   ]);
 }
 };  

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
+- add paging