title: Issue with object within an object in react-native: Undefined is not an object
body: <p>I have an object that I read into state. When I tried to extract a value from within that object in render I get an error saying "undefined is not an object". </p>
  
  <p>So the object looks like this: const currentGrid = {size: {cols: "15", rows: "15"}}</p>
  
  <p>I assign it to state with this.setState({ currentGrid: currentGrid }) in componentWillMount.</p>
  
  <p>In render I do this: </p>
  
  <pre><code>render() {
      return (
        &lt;Container&gt;
          &lt;Content&gt;
            &lt;List&gt;
              &lt;ListItem&gt;
                &lt;Body&gt;
                  &lt;Text&gt;{this.state.currentGrid.size.cols}&lt;/Text&gt;
                &lt;/Body&gt;
              &lt;/ListItem&gt;
            &lt;/List&gt;
          &lt;/Content&gt;
  &lt;/Container&gt;
  );
  }
  </code></pre>
  
  <p>When I load the component I get "TypeError: undefined is not an object (evaluating 'this.state.currentGrid.size.cols')</p>
  
  <p>I know that the object is set in state. If I leave off "cols" the error is: </p>
  
  <p>Invariant: Objects are not valid as React child (found: object with keys {cols, rows}). If you meant to render a collection of children use an Array instead.</p>
  
  <p>Sorry if this is a common error, but I can't find how to do it properly unless I have to convert this embedded object into an array, which doesn't seem right.</p>