Add extra credit solution epicweb-dev#3

src/exercise/04.html

@@ -28,16 +28,43 @@
     //   <div className="message">{message({children: 'Goodbye World'})}</div>
     // </div>
     // )
-    function Message({children}) {
-      return <div className='message'>{children}</div>
-    }
+    // function Message({children}) {
+    //   return <div className='message'>{children}</div>
+    // }
 
+    // const element = (
+    //   <div className='container'>
+    //     <Message>Hello World</Message>
+    //     <Message>Goodbye World</Message>
+    //   </div>
+    // ) 
+
+    function Message({greeting, subject}) {
+      return (
+        <div className='message'>{greeting}, {subject}</div>
+      )
+    }
+
+    const PropTypes = {
+      string(props, propName, component) {
+        if(typeof props[propName] !== 'string') {
+          return new Error(`Entry is ${typeof props[propName]}. Please use a string`)
+        }
+      },
+    }
+
+    Message.propTypes = {
+      greeting: PropTypes.string,
+      subject: PropTypes.string,
+    }
+
     const element = (
       <div className='container'>
-        <Message>Hello World</Message>
-        <Message>Goodbye World</Message>
-      </div>
-    ) 
+        <Message greeting="Hello" subject="World"/>
+        <Message greeting="Goodbye" subject="World"/>
+        </div>
+    )
+
     // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
     ReactDOM.createRoot(document.getElementById('root')).render(element)
   </script>