Exercise 4

src/exercise/04.html

@@ -8,17 +8,155 @@
   <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
   <script type="text/babel">
     // 🐨 Make a function called `message` which returns the JSX we want to share
-
+    function message(props) {
+      const {children, ...other} = props; 
+      return <div className="message">{children}</div>;
+    }
     // 🐨 use that function in place of the divs below with:
     // 💰 {message({children: 'Hello World'})} {message({children: 'Goodbye World'})}
     const element = (
       <div className="container">
-        <div className="message">Hello World</div>
-        <div className="message">Goodbye World</div>
+        {message({children: 'Hello World'})}
+        {message({children: 'Goodbye World'})}
       </div>
-    )
+    );
 
     // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
-    ReactDOM.render(element, document.getElementById('root'))
+    ReactDOM.render(element, document.getElementById('root'));
+  </script>
+
+  <h2>EXTRA CREDIT #1</h2>
+  <div id="root2"></div>
+  <script type="text/babel">
+    function message(props) {
+      const {children, ...other} = props; 
+      return <div className="message">{children}</div>;
+    }
+
+    // So instead of calling your message function, pass it as the first argument to React.createElement
+    // and pass the {children: 'Hello World'} object as the second argument.
+    const element = (
+      <div className="container">
+        {React.createElement(message, {children: 'Hello World'})}
+        {React.createElement(message, {children: 'Goodbye World'})}
+      </div>
+    );
+
+    ReactDOM.render(element, document.getElementById('root2'));
+  </script>
+
+  <h2>EXTRA CREDIT #2</h2>
+  <div id="root3"></div>
+  <script type="text/babel">
+    //See if you can change your component function name so people can use it with JSX more easily!
+    function Message(props) {
+      const {children, ...other} = props; 
+      return <div className="message">{children}</div>;
+    }
+
+    const element = (
+      <div className="container">
+        <Message>Hello World</Message>
+        <Message>Goodbye World</Message>
+      </div>
+    );
+
+    ReactDOM.render(element, document.getElementById('root3'));
   </script>
+
+  <h2>EXTRA CREDIT #3</h2>
+  <div id="root4"></div>
+  <script type="text/babel">
+    const PropTypes = {
+      string(props, propName, componentName) {
+        if (typeof props[propName] !== 'string') {
+          return new Error(`${props[propName]} is not a valid string`);
+        }
+      },
+    }
+
+    function Message({subject, greeting}) {
+      return (
+        <div className="message">
+          {greeting}, {subject}
+        </div>
+      )
+    }
+
+    Message.propTypes = {
+      subject: PropTypes.string,
+      greeting: PropTypes.string
+    }
+
+    const element = (
+      <div className="container">
+        <Message greeting="Hello" subject="World" />
+        <Message greeting="Goodbye" subject="World" />
+        <Message greeting={2} subject="World" />
+        <Message greeting="Goodbye" />
+      </div>
+    );
+
+    ReactDOM.render(element, document.getElementById('root4'));
+  </script>
+
+  <h2>EXTRA CREDIT #4</h2>
+  <p>It keeps saying <span style="color:red"> Message: prop type `subject` is invalid;
+  it must be a function, usually from the `prop-types` package, but received `undefined`</span>.
+  It's correct that it's undefined, but I don't understand why it's expecting a function when 
+  I've set the proptype to 'string'</p>
+  <div id="root5"></div>
+  <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
+  <script type="text/babel">
+    Message.propTypes = {
+      subject: PropTypes.string.isRequired,
+      greeting: PropTypes.string.isRequired
+    }
+
+    function Message({subject, greeting}) {
+      return (
+        <div className="message">
+          {greeting}, {subject}
+        </div>
+      )
+    }
+
+    const element = (
+      <div className="container">
+        <Message greeting="Hello" subject="World" />
+        <Message greeting="Goodbye" subject="World" />
+        <Message greeting={2} subject="World" />
+        <Message greeting="Goodbye" />
+      </div>
+    );
+
+    ReactDOM.render(element, document.getElementById('root5'));
+  </script>
+
+  <h2>EXTRA CREDIT #5</h2>
+  <div id="root6"></div>
+  <script type="text/babel">
+    Message.propTypes = {
+      subject: PropTypes.string.isRequired,
+      greeting: PropTypes.string.isRequired
+    }
+
+    function Message({subject, greeting}) {
+      return (
+        <div className="message">
+          {greeting}, {subject}
+        </div>
+      )
+    }
+
+    const element = (
+      <React.Fragment>
+        <Message greeting="Hello" subject="World" />
+        <Message greeting="Goodbye" subject="World" />
+      </React.Fragment>
+    );
+
+    ReactDOM.render(element, document.getElementById('root6'));
+  </script>
+
 </body>