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.

I'm going to make the assumption that child_tiers is undefined until the API returns a value to the state. In which case, there would be a couple solutions. One would be to have a check in place that checks for the existence of the data from the API prior to doing anything with it. If you're using a compatible transpiler and have it set up for optional chaining, then you could also do something like this this.props.myProps?.child_tiers?.[0] developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Chris
– Chris, Commented Jul 13, 2020 at 21:37

Sven.hig · Accepted Answer · 2020-07-13 21:41:24Z

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)

answered Jul 13, 2020 at 21:41

Sven.hig

4,5292 gold badges10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Simran Over a year ago

React gives an error when on myProps.child_tiers[0] so I cant go beyond that.

Simran Over a year ago

TypeError: Cannot read property '0' of undefined. Going 1 level deep gives this error.

Sven.hig Over a year ago

in that case it means either your data is not of the same format you posted maybe it's sightly different because it's too deeply nested you haven't noticed that or you api didn't return any data in the first place, to check the latter console.log(data)// the data you receive from the api and see if it shows any values

Collectives™ on Stack Overflow

Access nested object in react props

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related