как обновить значение динамического объекта, который содержит массив и дочерние объекты

Question

Я пытаюсь сделать динамический HTML-редактор страниц в ReactionJS. У меня есть объект, который содержит все настройки страницы, такие как цвет фона, размер шрифта в соответствии с представлениями. слышу, что вы можете видеть мои объекты: -

const defaultPageData = {
  view: [
    {
      type: "view",
      property: {
        height: "70%"
      },
      child: [
        {
          type: "row",
          property: {},
          child: [
            {
              type: "column",
              property: {
                mobile: 16,
                tablet: 16,
                computer: 16,
                largeScreen: 16,
                widescreen: 16
              },
              child: [
                {
                  type: "text",
                  property: {
                    text: " pratik",
                    color: "#CCCCCC",
                    fontSize: "18px"
                  }
                },
                {
                  type: "image",
                  property: {
                    src:
                      "/wireframe/image.png"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      type: "view",
      property: {},
      child: [
        {
          type: "column",
          property: {
            mobile: 16,
            computer: 2
          },
          child: [
            {
              type: "text",
              property: {
                text: "hello pratik",
                color: "#CCCCCC",
                fontSize: "18px"
              }
            },
            {
              type: "text",
              property: {
                text: "sagar",
                color: "#CCCCCC",
                fontSize: "18px"
              }
            },
            {
              type: "text",
              property: {
                text: "jay",
                color: "#CCCCCC",
                fontSize: "18px"
              }
            },
            {
              type: "image",
              property: {
                src: "wireframe/image.png"
              }
            }
          ]
        },
        {
          type: "column",
          property: {},
          child: [
            {
              type: "image",
              property: {
                src: "wireframe/image.png"
              }
            }
          ]
        }
      ]
    }
  ]
};

Я привык запоминать текущий выбор вида, используя одномерный массив, например activeComponentIndex = [0,0,0,0] означает, что текущий выбранный вид - это текст. как

Я пытаюсь получить текущий выбранный вид, как

activeComponentIndex = [0,0,0,0]

selectComponent(activeComponentIndex) {
    console.log("activeComponetIndex", activeComponentIndex);
    let view = this.state.pageData.view;
    console.log("fullView", view);
    activeComponentIndex.map(id => {
      if (view[id].child) view = view[id].child;
      else view = view[id];
      console.log("map", id, view);
    });
    console.log("selectedView", view);
    this.setState({
      activeComponent: { view: view, activeComponentIndex }
    });
  }

Мне нужно добавить свойство выбранного представления 'selected: true',

 property: {
                selected: true,
                text: "jay",
                color: "#CCCCCC",
                fontSize: "18px"
            }