followed along part 2b, ready for next exercises

parts/2/notes.md

@@ -4,3 +4,9 @@ Exercises:
 * [X] 2.3
 * [X] 2.4
 * [X] 2.5
+* [ ] 2.5
+* [ ] 2.6
+* [ ] 2.7
+* [ ] 2.8
+* [ ] 2.9
+* [ ] 2.10

parts/2/renderingCollections/src/App.jsx

@@ -1,10 +1,47 @@
+import { useState } from "react";
 import Note from "./components/Note";
 
-const App = ({ notes }) => {
+const App = ({ startingNotes }) => {
+  const [notes, setNotes] = useState(startingNotes);
+  const [newNote, setNewNote] = useState("a new note...");
+  const [showAll, setShowAll] = useState(true);
+
+  const addNote = (event) => {
+    event.preventDefault();
+    const newNoteObject = {
+      content: newNote,
+      important: Math.random() < 0.5,
+      id: String(notes.length + 1),
+    };
+
+    setNotes(notes.concat(newNoteObject));
+    setNewNote("");
+  };
+
+  const handleNoteChange = (event) => {
+    console.log(event.target.value);
+    setNewNote(event.target.value);
+  };
+
+  const notesToShow = showAll
+    ? notes
+    : notes.filter((note) => note.important === true);
+
   return (
     <div>
       <h1>Notes</h1>
-      <ul>{notes.map((note) => Note({ note }))}</ul>
+      <div>
+        {" "}
+        <button onClick={() => setShowAll(!showAll)}>
+          {" "}
+          show {showAll ? "important" : "all"}{" "}
+        </button>{" "}
+      </div>
+      <ul>{notesToShow.map((note) => Note({ note }))}</ul>
+      <form onSubmit={addNote}>
+        <input value={newNote} onChange={handleNoteChange} />
+        <button type="submit">save</button>
+      </form>
     </div>
   );
 };

parts/2/renderingCollections/src/main.jsx

@@ -20,5 +20,5 @@ const notes = [
 ]
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <App notes={notes} />
+  <App startingNotes={notes} />
 )