title: Cannot convert undefined or null to object in react
body: <p>I am trying to map object properties from initial state object. I can get all properties except the nested <code>milesotnes</code>.</p>
  
  <p>The initial state is defined in components class constructor like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class GoalView extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        dataGoal: {},
        uid: firebaseAuth().currentUser.uid,
        currentGoalId: this.props.match.params.goalId,
      };
    }
  
    componentDidMount = () =&gt; {
      const dataGoalRef = dbRef.child('goals/'+this.state.uid+'/'+this.state.currentGoalId);
      dataGoalRef.on('value', snap =&gt; {
          this.setState({
            dataGoal: snap.val(),
            currentGoalId: this.props.match.params.goalId,
          });
      });
    }
  
    componentWillUnmount = () =&gt; {
      this.state = {
        currentGoalId: null,
      };
    }
    
    ...
    
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am getting the <code>currentGoalId</code> from a React Router V4 Link:</p>
  
  <pre><code>&lt;Link title="Open goal" to={"/app/goal/id"+key}&gt;Open goal&lt;/Link&gt;
  </code></pre>
  
  <p>which is in a higher order component. The render method of the current GoalView component looks like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  render() {
      return(
        &lt;div&gt;
          &lt;main className="content"&gt;
            &lt;p&gt;{this.state.dataGoal.description}&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;
  
              {Object.keys(this.state.dataGoal.milestones).map( (milestoneKey) =&gt; {
                const milestonesData = this.state.dataGoal.milestones[milestoneKey];
  
                return &lt;div className="milestone-wrap" key={milestoneKey}&gt;
                         &lt;label className="milestone-label truncate"&gt;{milestonesData.name}&lt;/label&gt;
  
                       &lt;/div&gt;
              })}
  
          &lt;/main&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and the state:</p>
  
  <p><a href="https://i.stack.imgur.com/AUzgQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AUzgQ.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>I am getting <code>Cannot convert undefined or null to object</code> from this
    row <code>{Object.keys(this.state.dataGoal.milestones).map( (milestoneKey)
    =&gt; {...}</code></p>
  </blockquote>
  
  <p>but the <code>description</code> in render method right above that row is rendering just fine. Anyone has some ideas, please?</p>
  
  <p>Thank you,
  Jakub</p>