Dynamically Add React Components

CONTEXT

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).

PROBLEM

Not sure how to go about it:

1. Without needing to define a fixed number of states (urlpath1, urlpath2, etc) in the parent component.
2. Without defining a fixed number of <Input/> grand children components in the child component.

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 <Input> fields I have.

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 (
                <div>

                {error ? <Message inverted={true}  rounded={true}  theme="error">{error}</Message>  : null}

              <AddConditionSelect
                segmentId={segmentId}
                onUserClick={this.onUserClick}
                conditionTitle={this.state.conditionTitle}
                onUserInputChange={this.onUserInputChange}
              />


              <PanelFooter theme="default">
                <Button
                    backgroundColor="primary"
                    color="white"
                    inverted={true}
                    rounded={true}
                    onClick={(event) => this.onSubmit(event)}
                  >
                    Next Step
                </Button>
              </PanelFooter>


                </div>
              );
      //ADD URL PATH
      case 21: return (
                    <div>

                    <AddConditionCURLPath 'something here' />

                    <PanelFooter theme="default">
                      <Button
                          backgroundColor="primary"
                          color="white"
                          inverted={true}
                          rounded={true}
                          onClick={(event) => this.onSubmit(event)}
                        >
                          Next Step
                      </Button>
                    </PanelFooter>

                    </div>

                  );

        //ADD TIME ON SITE
        case 22: return (
                      <div>

                        <AddConditionSomethignElse  />

                      <PanelFooter theme="default">
                        <Button
                            backgroundColor="primary"
                            color="white"
                            inverted={true}
                            rounded={true}
                            onClick={(event) => this.onSubmit(event)}
                          >
                            Next Step
                        </Button>
                      </PanelFooter>

                      </div>


                    );

    }//End switch

    //end render
  }

}

export default AddConditionDashboard;

This is my child component - here I need to dynamically add new ` fields, values of which need to be transmitted to the parent component.

    class AddConditionCURLPath extends React.Component {

  render() {
    const {error} = this.props;

    return (
      <div>

        <Panel theme="info">

        {error ? <Message inverted={true}  rounded={true}  theme="error">{error}</Message>  : null}
        <Container>
          Configure URL Path - What Pages A Visitor Needs to Visit to meet this conditino
            <Divider />

            <Input
              value={this.props.urlPath}
              label=""
              type="text"
              buttonLabel="Add Condition"
              name="add_segment"
              onChange={this.props.onUserInputChange}
              placeholder="Condition Title"
            />

            <Input
              value={this.props.urlPath}
              label=""
              type="text"
              buttonLabel="Add Condition"
              name="add_segment"
              onChange={this.props.onUserInputChange}
              placeholder="Condition Title"
            />

            <Button
                backgroundColor="primary"
                color="white"
                inverted={true}
                rounded={true}
                onClick={(event) => this.addInputField(event)}
              >
                Add Another Input Field
            </Button>


          </Container>

        </Panel>

      </div>
    );
  }

}

export default AddConditionCURLPath;