React: Return last child object from nested props

Question

I have a key-pair object in an object within an object within an object . I Object.assign the middle layer so the new object is an object within an object.

I send this new object as a prop.

I can console.log the new parent and child and see the object, but trying to console.log the last child returns

Uncaught TypeError: Cannot read property 'child' of undefined.

Wagwan?

obj:
    {
    Something: Null,
    Grandparent: {
        SomethinElse: Null,
        Parent: {
            SomethingMore: Null,
            Child: {
                SomeValue: "Duck"
            }
        }
    }

newObj:
    Child: {
        SomeValue: "Duck"
    }

Then I set

this.state.cow: newObj

Then I send to a component and call

{console.log(this.props.cow)}

Object: {SomeValue: "Duck"}

good. Then I either log or render

{console.log(this.props.cow.SomeValue)}

Uncaught TypeError: Cannot read property 'SomeValue' of undefined

Many thanks for your understanding in this rather basic question.

 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) => { 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 ( <div> <List main={this.state.main} cows={this.state.cows} /> </div> ) } } export default class List extends React.Component { render(){ return ( <div> List cows-fish: {this.props.cows.fish} <br /> </div> ) } } 

Answer 1

I don't see anything wrong with the logic behind your code. If I were to bet money, I would guess it is a typo somewhere. These are a few inconsistencies I noticed:

• In your example object, Child has a capital C while in the error message it is lowercase

• You seem to be missing a closing curly brace in AwsReadFunction , right before the render method declaration.

• You use cow in a few places, then cows in other

This is obviously just a guess, but it won't hurt to double check :)