6 - Displaying Data with Props

react-foundations/index.html

@@ -8,14 +8,24 @@
     <script type="text/jsx">
         const app = document.getElementById('app');
 
-        function Header(){
-          return (<h1>Develop. Preview. Ship.</h1>);
+        function Header({title}){
+          console.log(title)
+          return (<h1>{title? title : 'Default Title'}</h1>);
         }
 
-        function HomePage(){
-          return (<div>
-            <Header />
-          </div>);
+        function HomePage() {
+          const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
+
+          return (
+            <div>
+              <Header title="Develop. Preview. Ship." />
+              <ul>
+                {names.map((name) => (
+                  <li key={name}>{name}</li>
+                ))}
+              </ul>
+            </div>
+          );
         }
 
         const root = ReactDOM.createRoot(app);