RenderProps.js

class MetaGroupList extends Component {
  getGroupsFromFields = () => {
    const { fields } = this.props;
    return fields.map((fieldName, i) => {
      return { ...fields.get(i), fieldName };
    });
  };

  destroyGroup = fieldName => {
    if (window.confirm("Are you sure you'd like to delete this?")) {
      this.props.changeFieldValue(`${fieldName}._destroy`, true);
    }
  };

  handleNewGroup = e => {
    const { fields, fieldName, getNewGroup } = this.props;
    const groups = this.getGroupsFromFields();
    e.preventDefault();
    fields.push(
      getNewGroup({
        fieldName: `${fieldName}.meta_scoring_condition_groups[${
          groups.length
        }]`,
      }),
    );
  };

  render() {
    this.props.children(this.handleNewGroup, this.destroyGroup);
  }
}

class MetaScoringConditionGroupList extends Component {
  render() {
    // fieldName replaces metaScoringTypeFieldName, for example
    const { fields, fieldName } = this.props;
    return (
      <MetaGroupList
        fields={fields}
        fieldName={fieldName}
        getNewGroup={getNewMetaScoringConditionGroup} // Pretend we imported this above
      >
        {(handleNewGroup, destroyGroup) => {
          return (
            <div>
              {metaScoringConditionGroups.map(
                (metaScoringConditionGroup, i) => {
                  const metaScoringConditionGroupFieldName = `${fieldName}.meta_scoring_condition_groups[${i}]`;
                  return (
                    <CollapsibleDetailSection
                      title={`Meta Scoring Group: ${
                        metaScoringConditionGroup.name
                      }`}
                    >
                      <MetaScoringConditionGroupForm
                        destroyMetaScoringConditionGroup={destroyGroup} // Replaced method here
                        key={
                          metaScoringConditionGroup.id ||
                          metaScoringConditionGroup.uid
                        }
                        fieldName={metaScoringConditionGroup.fieldName}
                        metaScoringConditionGroup={metaScoringConditionGroup}
                      />
                      <div className="row">
                        <div className="col-lg-1" />
                        <div className="col-lg-11">
                          <CollapsibleDetailSection title="Meta Scoring Conditions">
                            <FieldArray
                              name={`${metaScoringConditionGroupFieldName}.meta_scoring_conditions`}
                              component={MetaScoringConditionList}
                              changeFieldValue={changeFieldValue}
                              metaScoringConditionGroupFieldName={
                                metaScoringConditionGroupFieldName
                              }
                            />
                          </CollapsibleDetailSection>
                        </div>
                      </div>
                    </CollapsibleDetailSection>
                  );
                },
              )}
              {unlocked &&
                canEdit && (
                  <div
                    className="btn btn-success btn-sm mt-2"
                    onClick={handleNewGroup} //Replaced method here
                  >
                    + Add New MetaScoringConditionGroup
                  </div>
                )}
            </div>
          );
        }}
      </MetaGroupList>
    );
  }
}