Using TaggedValueList component

Author: amolskh

components/Prize/PrizeItem.jsx

@@ -8,7 +8,7 @@ $gray: #47474F;
 $purple: #B47DD6;
 $accent: #59A7FF;
 
-.PrizeItem {
+.TaggedValue {
   display:inline-block;
   height: 20px;
   margin-right: 15px;
@@ -38,37 +38,37 @@ $accent: #59A7FF;
 }
 
 .prize {
-  .PrizeItem:nth-child(1) {
+  .TaggedValue:nth-child(1) {
     .tagged-value-bg {
       background: $gold;
     }
   }
-  .PrizeItem:nth-child(2) {
+  .TaggedValue:nth-child(2) {
     .tagged-value-bg {
         background: $silver;
     }
   }
 
-  .PrizeItem:nth-child(3) {
+  .TaggedValue:nth-child(3) {
     .tagged-value-bg {
         background: $bronze;
     }
   }
 }
 
 .bonus {
-  .PrizeItem:nth-child(1) {
+  .TaggedValue:nth-child(1) {
     .tagged-value-bg {
       background: $purple;
     }
   }
-  .PrizeItem:nth-child(2) {
+  .TaggedValue:nth-child(2) {
     .tagged-value-bg {
         background: $purple;
     }
   }
 
-  .PrizeItem:nth-child(3) {
+  .TaggedValue:nth-child(3) {
     .tagged-value-bg {
         background: $accent;
     }

components/Prize/PrizeItem.scss

@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import TaggedValue from '../TaggedValue/TaggedValue'
+import TaggedValueList from '../TaggedValue/TaggedValueList'
 
 require('./PrizeItem.scss')
 
@@ -14,9 +14,7 @@ const PrizeItems = ({type, title, items}) => {
     <div className="PrizeItems">
         <div className="title">{title}</div>
         <div className={itemsClass}>
-          {items.map((item, index) => {
-            return <TaggedValue title={item.title} subText={item.subText} count={item.count} style="PrizeItem" key={index}/>
-          })}
+          <TaggedValueList items={items} layout="wrap"/>   
         </div>
     </div>
   )