From be61f58eb7f50b7950a701f1d4d1eb64691972cf Mon Sep 17 00:00:00 2001
From: Tree Jamie <me@treejamie.com>
Date: Mon, 7 Apr 2025 21:04:40 +0100
Subject: [PATCH] props are ways give 'properties' to components. They are
 flexible; which is nice

---
 react-foundations/index.html | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/react-foundations/index.html b/react-foundations/index.html
index 531ba05..56e0ba6 100644
--- a/react-foundations/index.html
+++ b/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);