title: Dynamically Add React Components
body: <p><strong>CONTEXT</strong></p>
  
  <p>I'm trying to dynamically add input fields in a react component while still keeping track of the states in the parent component (to later call a method using them).</p>
  
  <p><strong>PROBLEM</strong> </p>
  
  <p>Not sure how to go about it: </p>
  
  <ol>
  <li>Without needing to define a fixed number of  states (<code>urlpath1</code>, <code>urlpath2</code>, etc) in the parent component. </li>
  <li>Without defining a fixed number of <code>&lt;Input/&gt;</code> grand children components in the child component. </li>
  </ol>
  
  <p>This is my parent component - this one needs to capture the state (or the values) of the input elements of the children/grandchildren components, regardless of how many such <code>&lt;Input&gt;</code> fields I have. </p>
  
  <pre><code>import AddConditionSelect from './AddConditionSelect.jsx';
  
  class AddConditionDashboard extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        //Form Steps States
        step: 1,
        //AddConditionSelect States
        conditionTitle: '',
        conditionType: ''
      };
      // bind the context for the user input event handler
      // so we can use `this` to reference `AddConditionDashboard`
      this.onUserInputChange = this.onUserInputChange.bind(this);
      this.onUserClick = this.onUserClick.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
  //TODO: REFACTOR - Can we refactor both these events into one to be used?
    onUserInputChange(event) {
      this.setState({
       conditionTitle: event.target.value
      });
    }
  
    onUserClick(event) {
      this.setState({
        conditionType:event.target.value
      });
    }
  
    onSubmit(event) {
      event.preventDefault;
      const {create, segmentId} = this.props;
      const conditionTitle = this.state.conditionTitle;
      const conditionType = this.state.conditionType;
  
      create(conditionTitle, conditionType, segmentId);
      //TODO: CALLBACK IF STATEMENT - Check with a callback function if create ran sucessfully, only then do nextste();
  
      if (conditionType == 'urlPath') {
        this.setState({
            step: 21
          });
      } else if (conditionType == 'timeOnSite') {
        this.setState({
            step: 22
          });
      };
  
    }
  
    render() {
  
  
      const {error, segmentId} = this.props;
  
      switch (this.state.step) {
        //SELECT CONDITION
        case 1: return (
                  &lt;div&gt;
  
                  {error ? &lt;Message inverted={true}  rounded={true}  theme="error"&gt;{error}&lt;/Message&gt;  : null}
  
                &lt;AddConditionSelect
                  segmentId={segmentId}
                  onUserClick={this.onUserClick}
                  conditionTitle={this.state.conditionTitle}
                  onUserInputChange={this.onUserInputChange}
                /&gt;
  
  
                &lt;PanelFooter theme="default"&gt;
                  &lt;Button
                      backgroundColor="primary"
                      color="white"
                      inverted={true}
                      rounded={true}
                      onClick={(event) =&gt; this.onSubmit(event)}
                    &gt;
                      Next Step
                  &lt;/Button&gt;
                &lt;/PanelFooter&gt;
  
  
                  &lt;/div&gt;
                );
        //ADD URL PATH
        case 21: return (
                      &lt;div&gt;
  
                      &lt;AddConditionCURLPath 'something here' /&gt;
  
                      &lt;PanelFooter theme="default"&gt;
                        &lt;Button
                            backgroundColor="primary"
                            color="white"
                            inverted={true}
                            rounded={true}
                            onClick={(event) =&gt; this.onSubmit(event)}
                          &gt;
                            Next Step
                        &lt;/Button&gt;
                      &lt;/PanelFooter&gt;
  
                      &lt;/div&gt;
  
                    );
  
          //ADD TIME ON SITE
          case 22: return (
                        &lt;div&gt;
  
                          &lt;AddConditionSomethignElse  /&gt;
  
                        &lt;PanelFooter theme="default"&gt;
                          &lt;Button
                              backgroundColor="primary"
                              color="white"
                              inverted={true}
                              rounded={true}
                              onClick={(event) =&gt; this.onSubmit(event)}
                            &gt;
                              Next Step
                          &lt;/Button&gt;
                        &lt;/PanelFooter&gt;
  
                        &lt;/div&gt;
  
  
                      );
  
      }//End switch
  
      //end render
    }
  
  }
  
  export default AddConditionDashboard;
  </code></pre>
  
  <p>This is my child component - here I need to dynamically add new ` fields, values of which need to be transmitted to the parent component. </p>
  
  <pre><code>    class AddConditionCURLPath extends React.Component {
  
    render() {
      const {error} = this.props;
  
      return (
        &lt;div&gt;
  
          &lt;Panel theme="info"&gt;
  
          {error ? &lt;Message inverted={true}  rounded={true}  theme="error"&gt;{error}&lt;/Message&gt;  : null}
          &lt;Container&gt;
            Configure URL Path - What Pages A Visitor Needs to Visit to meet this conditino
              &lt;Divider /&gt;
  
              &lt;Input
                value={this.props.urlPath}
                label=""
                type="text"
                buttonLabel="Add Condition"
                name="add_segment"
                onChange={this.props.onUserInputChange}
                placeholder="Condition Title"
              /&gt;
  
              &lt;Input
                value={this.props.urlPath}
                label=""
                type="text"
                buttonLabel="Add Condition"
                name="add_segment"
                onChange={this.props.onUserInputChange}
                placeholder="Condition Title"
              /&gt;
  
              &lt;Button
                  backgroundColor="primary"
                  color="white"
                  inverted={true}
                  rounded={true}
                  onClick={(event) =&gt; this.addInputField(event)}
                &gt;
                  Add Another Input Field
              &lt;/Button&gt;
  
  
            &lt;/Container&gt;
  
          &lt;/Panel&gt;
  
        &lt;/div&gt;
      );
    }
  
  }
  
  export default AddConditionCURLPath;
  </code></pre>