Access nested object in react props

Question

I have props in my child component like so

props in child:

myProps = 
{
    "url": "some url",
    "child_tiers": [
        {
            "tier_type": 1,
            "child_tiers": [
                {
                    "tier_type": 2,
                    "lower": 1.0,
                    "upper": 4.0,
                    "child_tiers": [
                        {
                            "tier_type": 3,
                            "lower": 0.0,
                            "upper": 5.0,
                            "child_tiers": [
                                {
                                    "tier_type": 4,
                                    "lower": 1,
                                    "upper": 100,
                                    "values": {
                                        "lowest": 85,
                                        "highest": 95,
                                        "multiplier": 18,
                                        "tier": "deepest tier"
                                    }
                                },
                                {
                                    "tier_type": 4,
                                    "lower": 100,
                                    "upper": 200,
                                    "values": {
                                        "lowest": 185,
                                        "highest": 195,
                                        "multiplier": 118,
                                        "tier": "deepest tier"
                                    }
                                }
                            ],
                            "values": null
                        }
                    ],
                    "values": null
                }
            ],
            "values": null
        }
    ],
    "description": "Important Description"
}

These props are part of the state of the parent component (the state of the parent is being set by calling an API using fetch). I want to create 3 arrays one each for lowest, highest and multiplier values in the deepest tier. I am able to console log this.props.myProps.url / this.props.myProps.description / this.props.myProps.child_tiers but when I do this.props.myProps.child_tiers[0] I get an error TypeError: Cannot read property '0' of undefined . Is there a clean way to achieve this? Can I use Promise here? Other suggested solutions of having the state as null didn't work for me.

Answer 1

This is how you could access the object with values lowest, highest and multiplier

 myProps = { "url": "some url", "child_tiers": [ { "tier_type": 1, "child_tiers": [// { "tier_type": 2, "lower": 1.0, "upper": 4.0, "child_tiers": [// { "tier_type": 3, "lower": 0.0, "upper": 5.0, "child_tiers": [// { "tier_type": 4, "lower": 1, "upper": 100, "values": { "lowest": 85, "highest": 95, "multiplier": 18, "tier": "deepest tier" } }, { "tier_type": 4, "lower": 100, "upper": 200, "values": { "lowest": 185, "highest": 195, "multiplier": 118, "tier": "deepest tier" } } ], "values": null } ], "values": null } ], "values": null } ], "description": "Important Description" } o=myProps.child_tiers[0]["child_tiers"][0]["child_tiers"][0]["child_tiers"][0].values lowest=[{low:o.lowest}] highest=[{hight:o.highest}] multiplier=[{multiple:o.multiplier}] console.log(o) console.log(lowest,highest,multiplier)