Вложенный флажок сопоставления не работает ReactJS

Question

У меня есть функция, которая запускает дочерние флажки после того, как установлен основной флажок, и все эти флажки сопоставлены из JSON.Основные чекбоксы (самый высокий порядок) и все его дочерние чекбоксы (2-й порядок) под ними показаны на чеке, и он отлично работает, и я пытаюсь показать, что это потомки этих потомков основных чекбоксов (3-й порядок).

В основном, чтобы показать все три ордера под друг другом при проверке и добавить 3-й ордер к моему текущему коду, поэтому Группа опций показывает Опции и под Опции - это то, что я хочу показать, а именно: Вариант 1 , Вариант 2 , Вариант 3 и т. Д.

Значения флажка передаются как реквизиты от Checkbox.js до Itemlist.js , где происходит выборка / карта.

Когда я пытался добиться этого, у меня естьсмог показать каждый из этих флажков 3-го порядка, но каждый отдельно, вместо того, чтобы показывать их как вложенные флажки.Я попытался включить его в существующую функцию отображения, чтобы показать их все как вложенные флажки, как уже упоминалось, но он не мог работать, он работает, только если он был отображен один вместо текущего отображенного пути, который является const selectedItem .в то время как путь сопоставления целевых флажков (3-го уровня) добавляется в Itemlist.js как const selectedMod ,

Основной фрагмент: https://codesandbox.io/embed/6jykwp3x6n?fontsize=14

То, чего я достиг до сих пор, чтобы показать целевые флажки, но по отдельности: https://codesandbox.io/embed/o932z4yr6y?fontsize=14

Checkbox.js

import React from "react";
import "./Checkbox.css";

class Checkboxes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentData: 0,
      limit: 2,
      checked: false
    };
  }

  selectData(id, event) {
    let isSelected = event.currentTarget.checked;
    if (isSelected) {
      if (this.state.currentData < this.props.max) {
        this.setState({ currentData: this.state.currentData + 1 });
      } else {
        event.preventDefault();
        event.currentTarget.checked = false;
      }
    } else {
      if (this.state.currentData >= this.props.min) {
        this.setState({ currentData: this.state.currentData - 1 });
      } else {
        event.preventDefault();
        event.currentTarget.checked = true;
      }
    }
  }

  render() {
    const input2Checkboxes =
      this.props.options &&
      this.props.options.map(item => {
        return (
          <div className="inputGroup2">
            {" "}
            <div className="inputGroup">
              <input
                id={this.props.childk + (item.name || item.description)}
                name="checkbox"
                type="checkbox"
                onChange={this.selectData.bind(
                  this,
                  this.props.childk + (item.name || item.description)
                )}
              />
              <label
                htmlFor={this.props.childk + (item.name || item.description)}
              >
                {item.name || item.description}{" "}

              </label>
            </div>
          </div>
        );
      });

    return (
      <form className="form">
        <div>
          {/** <h2>{this.props.title}</h2>*/}
          <div className="inputGroup">
            <input
              id={this.props.childk + this.props.name}
              name="checkbox"
              type="checkbox"
              checked={this.state.checked}
              onChange={this.selectData.bind(
                this,
                this.props.childk + this.props.uniq
              )}
              onChange={() => {
                this.setState({
                  checked: !this.state.checked,
                  currentData: 0
                });
              }}
            />
            <label htmlFor={this.props.childk + this.props.name}>
              {this.props.name}{" "}
            </label>
          </div>{" "}
          {this.state.checked ? input2Checkboxes : undefined}
        </div>
      </form>
    );
  }
}

export default Checkboxes;

Itemlist.js Где происходит отображение функции

...

      const selectedItem =
        selectedChild.children && selectedChild.children.length
          ? selectedChild.children[this.state.itemSelected]
          : null;

...

  <div>
                {selectedItem &&
                  selectedItem.children &&
                  selectedItem.children.map((item, index) => (
                    <Checkboxes
                      key={index}
                      name={item.name || item.description}
                      myKey={index}
                      options={item.children}
                      childk={item.id}
                      max={item.max}
                      min={item.min}
                    />
                  ))}
              </div>
...