Object to array react

Question

Im using React and want to do something like this:

Where the blue squares are initially hidden and show-up depending on which Colecao the user picks. So, some Classes with some Colecao inside where each one of them has "squares". This is my 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;

My 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 Tab is like my TabHeader, colecoes are each one of the list items and the array of letters should correspond to each one of the squares. The problem is that my tabs element is an object and I'm not sure how to pass it to an array. Also, where should I do it, in my app.js and pass the array as props or pass the object and convert into array on my component.

Thanks

Answer 1

Use the lodash library:

var arr = _.values(obj);

If you need it for other purposes in app.js, do it there, otherwise it doesn't matter.