Add create ui for roadmaps

src/components/ExtendableList.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Input from './Input';
+
+const ExtendableList = props => {
+  return (
+    <div>
+      <h4 className="text-default">{props.childCategory} for <b>{props.parentCategory}</b></h4>
+
+      {props.items.map((value, index) => {
+        return (
+          <div className="row" key={props.pIndex * 100 + index}>
+            <label className="col-sm-2 label-on-left">{props.inputLabels ? props.inputLabels[index] : `${props.childCategorySingular} ${index + 1}`}</label>
+            <div className="col-sm-10">
+              <div className="form-group label-floating is-empty">
+                <Input
+                  onChange={(newValue) => props.updateInputList(newValue, `${props.childCategory}`, props.pIndex, index)}
+                  text={value}
+                  placeholder={props.placeholder}
+                  helpBlock={props.helpBlock}
+                />
+              </div>
+            </div>
+          </div>
+        )
+      })}
+
+      {props.addItemList && <button type="button" onClick={() => props.addItemList(props.childCategory, props.pIndex)} className="btn btn-success"><i className="material-icons">add</i>{` Add ${props.childCategory}`}</button>}
+      <div>&nbsp;</div>
+    </div>
+  )
+}
+
+export default ExtendableList

src/components/Input.js

@@ -49,7 +49,8 @@ export class Input extends Component {
             placeholder={this.props.placeholder}
             value={this.props.text}
             disabled={(this.props.type === 'disabled') ? true : false}
-            />
+          />
+          <span className="help-block">{(this.props.helpBlock) ? this.props.helpBlock : ``}</span>
         </div>
       )
     } else if (valid === false && ((this.props.text === null || this.props.text === "") === false || this.props.submitted)) {
@@ -63,7 +64,8 @@ export class Input extends Component {
             placeholder={this.props.placeholder}
             value={this.props.text}
             disabled={(this.props.type === 'disabled') ? true : false}
-            />
+          />
+          <span className="help-block">{(this.props.helpBlock) ? this.props.helpBlock : ``}</span>
           {this.drawErrorMessage()}
         </div>
       )
@@ -77,7 +79,8 @@ export class Input extends Component {
             className="form-control"
             placeholder={this.props.placeholder}
             value={this.props.text}
-            />
+          />
+          <span className="help-block">{(this.props.helpBlock) ? this.props.helpBlock : ``}</span>
         </div>
       )
     }