empty object passed on props from nowhere

Question

Im passing props on react and in certain point, I get an empty object on them. This is a problem since I'll have to use the map function and "Cannot read property 'map' of undefined". The first log is from the parent class, the other four (should be three ?) are from its children. Please ignore the errors related with the key. I dont get this error if I dont call the TabsArea component, but thats not a solution.

My app.js:

import React, {Component} from 'react';

import Modelo3d from './Modelo3d/Modelo3d'
import Options from './Options/Options';
import ThumbnailAreas from './ThumbnailArea/ThumbnailAreas';
import ThumbnailArea from './ThumbnailArea/ThumbnailArea';
import TabsArea from './TabsArea/TabsArea';

    import 'bulma/css/bulma.css'
    import './App.css';

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

            this.state = {

                activeTab: 'Tab 1',

                thumbnails: [
                    {
                        tituloThumbnail: 'Costas',
                        texturas: ['A', 'B', 'C', 'D'],
                    },
                    {
                        tituloThumbnail: 'Pernas',
                        texturas: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    },
                    {
                        tituloThumbnail: 'Pés',
                        texturas: ['A', 'B'],
                    }
                ],

                tabs: [
                    {
                        tituloTab: 'Tab 1',
                        colecoes: ['Colecao 1', 'Colecao 2', 'Colecao 3', 'Colecao 4', 'Colecao 5', 'Colecao 6', 'Colecao 7', 'Colecao 8'],
                    },
                    {
                        tituloTab: 'Tab 2',
                        colecoes: ['Colecao 1'],
                    },
                    {
                        tituloTab: 'Tab 3',
                        colecoes: ['Colecao 1', 'Colecao 2', 'Colecao 3'],
                    },
                    {
                        tituloTab: 'Tab 4',
                        colecoes: ['Colecao 1', 'Colecao 2', 'Colecao 3', 'Colecao 4'],
                    }
                ]
            };
        }

        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;
        }

        render() {

            return (
                <div className={"container is-fluid"}>

                    <section>
                        <Modelo3d/>
                        <hr className={"line"}/>
                    </section>

                    <section>
                        <Options>

                            <ThumbnailAreas thumbnailAreas={this.state.thumbnails}
                            />

                            <hr className={"line"}/>

                            <TabsArea
                                activeTab={this.state.activeTab}
                                tabList={this.state.tabs}
                                changeActiveTab={this.changeActiveTab.bind(this)}
                                key={this.state.activeTab}
                                colecoes={this.activeTabContent()}/>

                        </Options>
                    </section>
                </div>
            );
        }
    }

    export default App;

The props console.log:

Answer 1

in your ThumbnailAreas component added this line of code

if(!this.props.thumbnails){
  return <div>loading</div>
}
return(
// your map function goes here this.props.thumbnails.map(item=>.......
)