Display list as list for Properties

src/Routes/Vegetable.js

@@ -49,6 +49,7 @@ export default class RouterVegetable extends React.Component {
     this.onExiting = this.onExiting.bind(this);
     this.onExited = this.onExited.bind(this);
     this.setHeight = this.setHeight.bind(this);
+    this.renderProperty = this.renderProperty.bind(this);
 
     this.getItem();
     this.props.changeBackground('vegetables')
@@ -160,6 +161,46 @@ export default class RouterVegetable extends React.Component {
     </Col>);
   }
 
+  formatValue(value) {
+
+    if (!value) {
+      return (null)
+    }
+
+    if (value[0] === '*') {
+      return (<div className='tabbed' dangerouslySetInnerHTML={{ __html: value.replace('*', '- ').replace(/\*/g, '<br />- ') }} />);
+    }
+    return value
+  }
+
+  renderProperty(item, key) {
+    if (item.Property === null || item.Property === undefined) {
+      return (null)
+    }
+
+    return (
+      <ListGroupItem key={key}>
+        <strong>{item.Property.name}</strong> : {this.formatValue(item.value)}
+      </ListGroupItem>
+    )
+  }
+
+  renderProperties() {
+    const {
+      item,
+    } = this.state;
+
+    if (!item.Properties ||
+      !item.Properties.length === 0
+    ) {
+      return (null);
+    }
+
+    return (<ListGroup className="double">
+      {item.Properties.map(this.renderProperty)}
+    </ListGroup>)
+  }
+
   render() {
     return (
       <Container>
@@ -184,23 +225,8 @@ export default class RouterVegetable extends React.Component {
           <Col xs="12">
             <Row className="with-margin">
               <Col className=" with-border with-background">
-                <ListGroup className="double">
-                  {this.state.item &&
-                    this.state.item.Properties &&
-                    this.state.item.Properties.map((item, key) => {
-                      return (
-                        item.Property !== null &&
-                          item.Property !== undefined ?
-                          (
-                            <ListGroupItem key={key}>
-                              <strong>{item.Property.name}</strong> : {item.value}
-                            </ListGroupItem>
-                          )
-                          :
-                          (null)
-                      )
-                    })}
-                </ListGroup>
+                {this.renderProperties()}
+
               </Col>
             </Row>
           </Col>

src/css/index.css

@@ -113,4 +113,8 @@ border: 1px solid #ccc;
 
 .carousel-item img {
   max-width: 100%;
+}
+
+.tabbed {
+  padding-left: 16px;
 }