From 3740ee0bc6552a5b3071905ae5d5bfdf1e03285d Mon Sep 17 00:00:00 2001
From: Timothy Ko <timothy.l.ko@gmail.com>
Date: Sun, 16 Sep 2018 19:58:21 -0500
Subject: [PATCH] demo

---
 src/App.js                               |  5 ++++-
 src/components/Instructions.component.js | 23 ++++++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index c41ed6c..39aef05 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,10 @@ class App extends Component {
     return (
       <div className="app">
         <h1>Hello World!</h1>
-        <Instructions />
+        <Instructions
+          shouldDisplayImage={true}
+          items={['apple', 'banana', 'clementine', 'dragonfruit', 'bl']}
+        />
       </div>
     )
   }
diff --git a/src/components/Instructions.component.js b/src/components/Instructions.component.js
index d980725..8dfdea1 100644
--- a/src/components/Instructions.component.js
+++ b/src/components/Instructions.component.js
@@ -6,11 +6,24 @@ class Instructions extends Component {
     return (
       <div className="instructions">
         Follow the instructions on the README to get started!
-        <img
-          className="instructions__logo"
-          src="https://uiuc.hack4impact.org/img/colored-logo.png"
-          alt="h4i logo"
-        />
+        {this.props.shouldDisplayImage && (
+          <img
+            className="instructions__logo"
+            src="https://uiuc.hack4impact.org/img/colored-logo.png"
+            alt="h4i logo"
+          />
+        )}
+        {this.props.items.map((item, index) => (
+          <ul key={index}>
+            {item.length >= 3 && (
+              <li>
+                {this.props.items.indexOf(item) % 2 === 1
+                  ? item.toUpperCase()
+                  : item}
+              </li>
+            )}
+          </ul>
+        ))}
       </div>
     )
   }