Added ModelInputField component within ModelDetail

gcallah · Oct 7, 2019 · 6acd568 · 6acd568
1 parent c9a043a
commit 6acd568
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/webapp/src/components/ModelDetail.js b/webapp/src/components/ModelDetail.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { Loader, Dimmer } from "semantic-ui-react";
+import ModelInputField from "./ModelInputField";
 import axios from "axios";
 
 const api_server = "https://indrasnet.pythonanywhere.com/models/props/";
@@ -175,20 +176,15 @@ class ModelDetail extends Component {
                     {Object.keys(this.state.model_details).map((item,i)=> {
                         if ("question" in this.state.model_details[item]){
                             return(
-                            <div key={i} className="form-group">
-                                <div>
-                                    <label className="col-sm-4 col-md-4 col-lg-4"
-                                        key={i}>{this.state.model_details[item]["question"]} {" "}
-                                    </label>
-                                    <input type={this.state.model_details[item]["atype"]}
-                                    className="col-sm-2 col-md-2 col-lg-2" style={{fontSize:"15pt"}}
+                                <ModelInputField
+                                    label={this.state.model_details[item]["question"]}
+                                    type={this.state.model_details[item]["atype"]}
                                     placeholder={this.state.model_details[item]["val"]}
-                                    onChange={this.propChanged} /*style={{width: 60}} */ name={item}/>
-                                    <span className="col-sm-6 col-md-6 col-lg-6" style={{color:"red", fontSize: 12}}>
-                                    {this.state.model_details[item]["errorMessage"]}</span>
-                                    <br/>
-                                </div>
-                            </div>
+                                    error={this.state.model_details[item]["errorMessage"]}
+                                    propChange={this.propChanged}
+                                    name={item}
+                                    key={i}
+                                />
                             )}
                         return null;
                         })

diff --git a/webapp/src/components/ModelInputField.js b/webapp/src/components/ModelInputField.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+function ModelInputField(props) {
+    return (
+        <div key={props.label} className="form-group">
+            <div>
+                <label className="col-sm-4 col-md-4 col-lg-4"
+                    key={props.label}>{props.label} {" "}
+                </label>
+                <input type={props.type}
+                className="col-sm-2 col-md-2 col-lg-2" style={{fontSize:"15pt"}}
+                placeholder={props.placeholder}
+                onChange={props.propChange} /*style={{width: 60}} */ 
+                name={props.name}/>
+                <span className="col-sm-6 col-md-6 col-lg-6" style={{color:"red", fontSize: 12}}>
+                {props.error}</span>
+                <br/>
+            </div>
+        </div>
+    )
+}
+
+export default ModelInputField;