add_description

src/data/data.json

@@ -4,84 +4,88 @@
     "image": ["../../public/assets/images/1-1.JPG", "../../public/assets/images/1-2.JPG"],
     "name": "Blessing",
     "time": "2018-8-30",
-    "description": "Feature flowers: Wax flower, Yew, Basil, Minicarn"
+    "description": ["Feature flowers: Wax flower, Yew, Basil, Minicarn"]
   },
   {
     "id": 2,
     "image": ["../../public/assets/images/2-1.JPG", "../../public/assets/images/2-2.JPG"],
     "name": "Corsage of Joy",
     "time": "2018-9-6",
-    "description": "Cushion mum, Minicarn, Waxflower"
+    "description": ["Cushion mum, Minicarn, Waxflower"]
   },
   {
     "id": 3,
     "image": ["../../public/assets/images/3-1.JPG", "../../public/assets/images/3-2.JPG"],
     "name": "Embrace",
     "time": "2018-9-13",
-    "description": "Feature flowers: Zinnia, Plumed celosia, Garlic chives"
+    "description": ["Feature flowers: Zinnia, Plumed celosia, Garlic chives"]
   },
   {
     "id": 4,
     "image": ["../../public/assets/images/4-1.JPG", "../../public/assets/images/4-2.JPG"],
     "name": "Blossom",
     "time": "2018-9-20",
-    "description": "Feature flowers: Artemisia, Sedum, Zinnia \n Foliage: Smokebush, Bayberry, Leather leaf"
+    "description": ["Feature flowers: Artemisia, Sedum, Zinnia", 
+      "Foliage: Smokebush, Bayberry, Leather leaf"]
   },
   {
     "id": 5,
     "image": ["../../public/assets/images/5-1.JPG", "../../public/assets/images/5-2.JPG"],
     "name": "Moonlight over the Lotus Pond",
     "time": "2018-9-20",
-    "description": "Feature flowers: Cushion chrysanthemum, Button chrysanthemum, Mini carnation\n Foliage: Smokebush"
+    "description": ["Feature flowers: Cushion chrysanthemum, Button chrysanthemum, Mini carnation", 
+      "Foliage: Smokebush"]
   },
   {
     "id": 6,
     "image": ["../../public/assets/images/6-1.JPG", "../../public/assets/images/6-2.JPG", "../../public/assets/images/6-3.JPG", "../../public/assets/images/6-4.JPG"],
     "name": "Tranquil",
     "time": "2018-9-27",
-    "description": "Feature flowers: Cosmo, Gomphrena\n Foliage: Bear grass, Smokebush, Leather leaf, Bayberry"
+    "description": ["Feature flowers: Cosmo, Gomphrena", 
+      "Foliage: Bear grass, Smokebush, Leather leaf, Bayberry"]
   },
   {
     "id": 7,
     "image": ["../../public/assets/images/7-1.JPG", "../../public/assets/images/7-2.JPG"],
     "name": "Passion",
     "time": "2018-10-4",
-    "description": "Feature flowers: Gladiolus, Mini carnations, Dasiy, Solidago, Plumed celosia"
+    "description": ["Feature flowers: Gladiolus, Mini carnations, Dasiy, Solidago, Plumed celosia"]
   },
   {
     "id": 8,
     "image": ["../../public/assets/images/8-1.JPG", "../../public/assets/images/8-2.JPG"],
     "name": "Greetings from A Summer Morning",
     "time": "2018-10-12",
-    "description": "Feature flowers: Larkspur, Spidermum, Mini carnations, Gomphrena"
+    "description": ["Feature flowers: Larkspur, Spidermum, Mini carnations, Gomphrena"]
   },
   {
     "id": 9,
     "image": ["../../public/assets/images/9-1.JPG", "../../public/assets/images/9-2.JPG"],
     "name": "Violet Rythm",
     "time": "2018-10-20",
-    "description": "Feature flowers: Iris, Alstroemeria"
+    "description": ["Feature flowers: Iris, Alstroemeria"]
   },
   {
     "id": 10,
     "image": ["../../public/assets/images/10-1.JPG", "../../public/assets/images/10-2.JPG", "../../public/assets/images/10-3.JPG"],
     "name": "Vitality",
     "time": "2018-10-25",
-    "description": "Feature flowers: Spidermum, Hypericum berry, Spray rose, Sea Lavender"
+    "description": ["Feature flowers: Spidermum, Hypericum berry, Spray rose, Sea Lavender"]
   },
   {
     "id": 11,
     "image": ["../../public/assets/images/11-1.JPG", "../../public/assets/images/11-2.JPG", "../../public/assets/images/11-3.JPG"],
     "name": "Affection",
     "time": "2018-11-9",
-    "description": "Feature flowers: Tulip, Solidago, Button mum, Safflower, Hypericum berries\n Foliage: Tree fern, Variegated mini pittosporum"
+    "description": ["Feature flowers: Tulip, Solidago, Button mum, Safflower, Hypericum berries", 
+      "Foliage: Tree fern, Variegated mini pittosporum"]
   },
   {
     "id": 12,
     "image": ["../../public/assets/images/12-1.JPG", "../../public/assets/images/12-2.JPG"],
     "name": "Gay",
     "time": "2018-11-15",
-    "description": "Feature flowers: Statice"
+    "description": ["Feature flowers: Statice"]
   }
 ]
 

src/pages/Portfolio.jsx

@@ -14,7 +14,7 @@ class Portfolio extends React.Component {
       activeItem: 'Portfolio',
       modalName: '',
       modalId: [],
-      modalDescription: '',
+      modalDescription: [],
       open: false,
     }
 
@@ -26,7 +26,7 @@ class Portfolio extends React.Component {
 
     render() {
       const {
-        activeItem, open, modalName, modalId,
+        activeItem, open, modalName, modalId, modalDescription
       } = this.state;
 
       return (
@@ -54,6 +54,11 @@ class Portfolio extends React.Component {
               <ModalHeader toggle={this.handleCloseCard}>{modalName}</ModalHeader>
               <ModalBody>
                 <CardCarousel idx={modalId} />
+                <div id="description">
+                  {modalDescription.map((line, key) =>(
+                    <h5 key={key}>{line}</h5>
+                  ))}
+                </div>
               </ModalBody>
               <ModalFooter>
                 <Button basic color="black" onClick={this.handleCloseCard}>Close</Button>

src/styles/Portfolio.scss

@@ -31,4 +31,8 @@
 #card-group {
     display: flex;
     justify-content: center;
-}
\ No newline at end of file
+}
+
+#description {
+    margin-top: 2%;
+}