title: React: Return last child object from nested props
body: <p>I have a <em>key-pair object</em> in an <em>object</em> within an <em>object</em> within an <em>object</em>.
  I Object.assign the middle layer so the new object is an object within an object.</p>
  
  <p>I send this new object as a prop. </p>
  
  <p>I can console.log the new parent and child and see the object, but trying to console.log the last child returns </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'child' of undefined.</p>
  </blockquote>
  
  <p>Wagwan?</p>
  
  <pre><code>obj:
      {
      Something: Null,
      Grandparent: {
          SomethinElse: Null,
          Parent: {
              SomethingMore: Null,
              Child: {
                  SomeValue: "Duck"
              }
          }
      }
  
  newObj:
      Child: {
          SomeValue: "Duck"
      }
  </code></pre>
  
  <p>Then I set </p>
  
  <pre><code>this.state.cow: newObj
  </code></pre>
  
  <p>Then I send to a component and call </p>
  
  <pre><code>{console.log(this.props.cow)}
  </code></pre>
  
  <blockquote>
    <p>Object: {SomeValue: "Duck"}</p>
  </blockquote>
  
  <p>good. Then I either log or render </p>
  
  <pre><code>{console.log(this.props.cow.SomeValue)}
  </code></pre>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'SomeValue' of undefined</p>
  </blockquote>
  
  <p>Many thanks for your understanding in this rather basic question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class AwsReadFunction extends React.Component {
  
    constructor(){
      super();
      this.state={
        main: {},
        info: {},
        cows: {}
     };
    } //constructor END
  
    componentDidMount() {
      var docClient = new AWS.DynamoDB.DocumentClient()
      var table = "Movies";
      var year = 1944;
      var title = "Lifeboat";
      var params = {
        TableName: table,
        Key:{
          "year": year,
          "title": title
        }
      };
  
      docClient.get(params, (err, data) =&gt; {
        if(err){
          console.log(JSON.stringify(err));
        } else {
          var ca = Object.assign({}, data.Item.info.cows);
          this.setState({
            main: data.Item,
            info: null,
            cows: ca
          });
        }
      });
  
    render(){
      return (
        &lt;div&gt;
          &lt;List main={this.state.main} cows={this.state.cows} /&gt;
        &lt;/div&gt;
      )
    }
  }
  export default class List extends React.Component {
    render(){
      return (
        &lt;div&gt;
        List cows-fish: {this.props.cows.fish} &lt;br /&gt;
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>