update keeper project using map and arrow functions

Author: rowantseng

keeper-app/src/components/App.jsx

@@ -2,12 +2,19 @@ import React from "react";
 import Header from "./Header";
 import Footer from "./Footer";
 import Note from "./Note";
+import examples from "./examples";
 
 function App() {
   return (
     <div>
       <Header />
-      <Note />
+      {examples.map((example) => (
+        <Note
+          key={example.key}
+          title={example.title}
+          content={example.content}
+        />
+      ))}
       <Footer />
     </div>
   );

keeper-app/src/components/Note.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-function Note() {
+function Note(props) {
   return (
     <div className="note">
-      <h1>Title</h1>
-      <p>Content</p>
+      <h1>{props.title}</h1>
+      <p>{props.content}</p>
     </div>
   );
 }

keeper-app/src/components/examples.js

@@ -0,0 +1,28 @@
+const examples = [
+    {
+      key: 1,
+      title: "Delegation",
+      content:
+        "Q. How many programmers does it take to change a light bulb? A. None – It’s a hardware problem"
+    },
+    {
+      key: 2,
+      title: "Loops",
+      content:
+        "How to keep a programmer in the shower forever. Show him the shampoo bottle instructions: Lather. Rinse. Repeat."
+    },
+    {
+      key: 3,
+      title: "Arrays",
+      content:
+        "Q. Why did the programmer quit his job? A. Because he didn't get arrays."
+    },
+    {
+      key: 4,
+      title: "Hardware vs. Software",
+      content:
+        "What's the difference between hardware and software? You can hit your hardware with a hammer, but you can only curse at your software."
+    }
+  ];
+
+export default examples;

keeper-app/src/index.js

@@ -11,6 +11,8 @@
 
 //HINT: You will need to study the classes in teh styles.css file to appy styling.
 
+//7. Add example notes
+
 import React from "react";
 import ReactDom from "react-dom";
 import App from "./components/App";