diff --git a/src/Routes/Vegetable.js b/src/Routes/Vegetable.js
index 9755723..1347daf 100644
--- a/src/Routes/Vegetable.js
+++ b/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 {
);
}
+ formatValue(value) {
+
+ if (!value) {
+ return (null)
+ }
+
+ if (value[0] === '*') {
+ return (
- ') }} />);
+ }
+ return value
+ }
+
+ renderProperty(item, key) {
+ if (item.Property === null || item.Property === undefined) {
+ return (null)
+ }
+
+ return (
+
+ {item.Property.name} : {this.formatValue(item.value)}
+
+ )
+ }
+
+ renderProperties() {
+ const {
+ item,
+ } = this.state;
+
+ if (!item.Properties ||
+ !item.Properties.length === 0
+ ) {
+ return (null);
+ }
+
+ return (
+ {item.Properties.map(this.renderProperty)}
+ )
+ }
+
render() {
return (
@@ -184,23 +225,8 @@ export default class RouterVegetable extends React.Component {
-
- {this.state.item &&
- this.state.item.Properties &&
- this.state.item.Properties.map((item, key) => {
- return (
- item.Property !== null &&
- item.Property !== undefined ?
- (
-
- {item.Property.name} : {item.value}
-
- )
- :
- (null)
- )
- })}
-
+ {this.renderProperties()}
+
diff --git a/src/css/index.css b/src/css/index.css
index 8eb580e..ba6054b 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -113,4 +113,8 @@ border: 1px solid #ccc;
.carousel-item img {
max-width: 100%;
+}
+
+.tabbed {
+ padding-left: 16px;
}
\ No newline at end of file