title: Iterate loop over state object with an array key in React
body: <p>I have a function <code>getBar()</code> returning an object like:</p>
  
  <pre><code>{
    foo: 'value',
    array: ['a', 'b', 'c']
  }
  </code></pre>
  
  <p>Here's my React component calling the above function i.e. <code>getBar()</code>:</p>
  
  <pre><code>class foo extends Component {
  
    state = {
      bar: {}
    };    
    componentDidMount(){
      this.setState({
        bar : getBar()
      });
    }
    render() {
      {this.state.bar.array.map((value, i) =&gt; &lt;div class="row" key={i}&gt;{value}&lt;/div&gt;)}
    }
  }
  </code></pre>
  
  <p>It always gives me <code>Uncaught TypeError: Cannot read property 'map' of undefined</code> error. <a href="https://stackoverflow.com/a/28320488/3151337">Exploring similar questions</a>, I came to know I will have to declare an empty state array which I did in different ways but none worked. Can anybody please give me an appropriate answer preferably with complete logic.</p>
  
  <p>I tried another way of declaring the state array to a <code>const</code> in <code>render()</code> but didn't get successful results.</p>