Объект для реакции на массив

Я использую React и хочу сделать что-то вроде этого:

Где синие квадраты изначально скрыты и отображаются в зависимости от того, какой Colecao выбрал пользователь. Итак, какой-то Classes с каким-то Colecao внутри, где у каждого из них есть «квадраты». Это мой app.js:

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {

            activeTab: 'Classe 1',


            tabs: [
                {
                    tituloTab: 'Classe 1',
                    colecoes: [{
                        'Colecao 1': [
                            'A', 'B', 'C', 'D'
                        ],
                        'Colecao 2': [
                            'A', 'B', 'C', 'D', 'E'
                        ],
                    }]
                },
                {
                    tituloTab: 'Classe 2',
                    colecoes: [{
                        'Colecao 1': [
                            'A', 'B', 'C', 'D'
                        ],
                        'Colecao 2': [
                            'A', 'B', 'C', 'D', 'E'
                        ],
                    }]
                },
                {
                    tituloTab: 'Classe 3',
                    colecoes: [{
                        'Colecao 1': [
                            'A', 'B', 'C', 'D'
                        ],
                        'Colecao 2': [
                            'A', 'B', 'C', 'D', 'E'
                        ],
                        'Colecao 3': [
                            'A', 'B', 'C'
                        ],
                    }]
                },
                {
                    tituloTab: 'Classe 4',
                    colecoes: [{
                        'Colecao 1': [
                            'A', 'B', 'C', 'D'
                        ],
                        'Colecao 2': [
                            'A', 'B', 'C', 'D', 'E'
                        ],
                        'Colecao 3': [
                            'A', 'B', 'C'
                        ],
                        'Colecao 4': [
                            'A', 'B', 'C', 'D', 'E', 'F'
                        ],
                    }],
                }
            ],

            ThumbnailsColecoes: [
                {
                    tituloThumbnail: 'Costas',
                    texturas: ['A', 'B', 'C', 'D'],
                }
            ],

            colecaoSelecionada:
                '',

            toggleThumbnailsColecoes:
                false,
        };
    }

    changeActiveTab(tab) {
        this.setState({activeTab: tab});
    }

    activeTabContent() {
        const activeIndex = this.state.tabs.findIndex((tab) => {
                return tab.tituloTab === this.state.activeTab;
            }
        );
        return this.state.tabs[activeIndex].colecoes;
    }

    adicionarColecaoSelecionada(colecao) {
        this.setState({colecoesSelecionadas: colecao}, () => {
                this.setState({toggleThumbnailsColecoes: true})
            }
        )
    }

    render() {

        return (
            <div className = {"container is-fluid"}>
                        <TabsArea
                            activeTab = {this.state.activeTab}
                            tabList = {this.state.tabs}
                            changeActiveTab = {this.changeActiveTab.bind(this)}
                            colecoes = {this.activeTabContent()}
                            addColecao = {this.adicionarColecaoSelecionada.bind(this)}
                            colecoesThumbnails = {this.state.ThumbnailsColecoes}
                            toggleThumbnails = {this.state.toggleThumbnailsColecoes}/>
                    </Options>
                </section>
            </div>
        );
    }
}

export default App;

Мои tabsArea.js

class TabsArea extends Component {
    render() {

        return (

            <div className = {["section", "tabsArea"].join(' ')}>

                <TabsHeader
                    activeTab = {this.props.activeTab}
                    tabList = {this.props.tabList}
                    changeActiveTab = {this.props.changeActiveTab}
                />

                <TabContent
                    key = {this.props.activeTab}
                    colecoes = {this.props.colecoes}
                    addColecao = {this.props.addColecao}/>
                <hr/>

                {//should get the Thumbnails for each "Colecao"
                    this.props.toggleThumbnails
                        ? <ThumbnailAreas
                            thumbnailAreas = {this.props.colecoesThumbnails}>
                        </ThumbnailAreas>
                        : null
                }

            </div>
        )
    }
}

export default TabsArea;

tabContent.js

class TabContent extends Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (

            <div>
                <ul className = {"uList"}>
                    {this.props.colecoes.map((list) => {
                            return <li className = {"li"}>
                                <a className = {"has-text-black"}
                                   onClick = {() => this.props.addColecao(list)}>
                                    {list} //should get the list of "Colecao"
                                </a>
                            </li>
                        }
                    )}
                </ul>
            </div>
        )
    }
}

export default TabContent;

Вкладка titulo похожа на мой TabHeader, colecoes - это каждый из элементов списка, а массив букв должен соответствовать каждому квадрату. Проблема в том, что мой элемент tabs является объектом, и я не уверен, как передать его на array. Кроме того, где я должен это сделать, в моем app.js и передать массив как props или передать объект и преобразовать его в array на моем компоненте.

Спасибо