title: React iterate over object from json data
body: <p>I have the following code:</p>
  
  <pre><code>import ReactDom from 'react-dom';
  import React from 'react';
  import {render} from 'react-dom';
  import $ from 'jquery';
  
  class News extends React.Component {
    render () {
      var news = [];
      this.props.news.forEach(function(el, i){
          news.push(&lt;SingleNews key={i} img={el.img} /&gt;);
      });
      return (
        &lt;section className="news-wrapper"&gt;
            {news}
        &lt;/section&gt;
      );
    }
  }
  
  class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
            data: ''
          }
      }
      mapObject(object, callback) {
        return Object.keys(object).map(function (key) {
          return callback(key, object[key]);
        });
      }
      componentDidMount () {
        const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
        $.get(newsfeedURL, function(result) {
          this.setState({data: JSON.parse(result)});
          console.log(typeof this.state.data.messages);
        }.bind(this));
      }
      render () {
          return (
              &lt;div&gt;
                  {Object.keys(this.state.data.messages).map(function(key) {
                      return &lt;div&gt;Key: {key}, Value: {this.state.data.messages[key]}&lt;/div&gt;;
                  })}
              &lt;/div&gt;
          )
      }
  }
  
  
  ReactDom.render(
    &lt;App /&gt;,
    document.getElementById('app')
  );
  </code></pre>
  
  <p>I am trying ti iterate over "this.state.data.messages" to output some data inside the render method.</p>
  
  <p>After typing this "console.log(typeof this.state.data.messages);" I have gathered that "this.state.data.messages" is an object hence the following:</p>
  
  <pre><code>            {Object.keys(this.state.data.messages).map(function(key) {
                  return &lt;div&gt;Key: {key}, Value: {this.state.data.messages[key]}&lt;/div&gt;;
              })}
  </code></pre>
  
  <p>however I have the following inside my console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot convert undefined or null to object</p>
  </blockquote>