Реакция: Как добавить условно отображаемые дополнительные параметры из дочерних компонентов (на 2 уровня ниже) в состояние?

Question

Я создал форму по ссылке в песочнице: https://codesandbox.io/s/rlmv6ojjyn

В разделе Тип SOW есть три флажка.При нажатии на флажки пользователь получает доступ к дополнительным параметрам (они еще не созданы, но для первого варианта потребуется набор раскрывающихся списков, а для третьего варианта устанавливается новый флажок (при нажатии первого), который будет (при нажатии).затем предоставит пользователю некоторые текстовые поля для отправки текста.

Я дошел до этой точки согласно коду в 'SOWType.js' (показан ниже), который является дочерним по отношению к PdfGenFormContainer.js.

У меня есть объект 'componentList' (внутри SOWType.js), который используется с условным рендерингом для отображения соответствующего подкомпонента при выборе соответствующего флажка)

У меня вопрос, как мневключить пользовательский выбор из этих подкомпонентов в состоянии.Объект 'componentList' находится в дочернем компоненте, так как все это сообщается состоянию в родительском компоненте?(так что все включено при отправке формы)?Должен ли 'componentList' находиться в родительском элементе?(как это будет работать?)

Является ли мой единственный вариант использовать избыточность, чтобы сделать это, или это можно сделать просто в React?

SOWType.js:

import React from "react";
import ProdSOWExtOptions from "./ExtendedOptions/ProdSOWExtOptions";
import TeradataExtOptions from "./ExtendedOptions/TeradataExtOptions";
import CustomProfExtOptions from "./ExtendedOptions/CustomProfExtOptions";

class SOWType extends React.Component {
  componentList = {
    ProductSow: <ProdSOWExtOptions type={this.props} />,
    "Teradata Customer SOW": <TeradataExtOptions />,
    "Custom Professional Services SOW": <CustomProfExtOptions />
  };
  render() {
    // console.log(this.props);
    return (
      <div className="form-group">
        <label htmlFor={this.props.name} className="form-label">
          {this.props.title}
          <h6>{this.props.subtitle}</h6>
        </label>
        <div className="checkbox-group">
          {this.props.options.map(option => {
            return (
              <label key={option}>
                <input
                  className="form-checkbox"
                  name={this.props.setName}
                  onChange={this.props.controlFunc}
                  value={option}
                  checked={this.props.selectedOptions.indexOf(option) > -1}
                  type={this.props.type}
                />
                {option}
                {this.props.selectedOptions.indexOf(option) > -1 ? (
                  <h5>{this.componentList[option]}</h5>
                ) : (
                  " "
                )}
              </label>
            );
          })}
        </div>
      </div>
    );
  }
}

export default SOWType;