React: Componentdidupdate, Unable to access object value

Question

I am unable to access the value from a object key.

componentDidUpdate(prevProps) {
        if (prevProps !== this.props) {
            console.log("component did update in top menu", this.props.topmenudata[0])
            this.setState({
            });
        }
    }

In the above method i have passed some data to my child component through props and it is accessed through .topmenudata

when i console.log(this.props.topmenudata[0]), i get the following object

{baudrate: "1200", databits: "7", parity: "even", stopbits: "1"}

when i console.log(this.props.topmenudata), i get the following object

0: {baudrate: "1200", databits: "7", parity: "even", stopbits: "1"}
length: 1
__proto__: Array(0)

yet, when i try to get the value of baudrate from the object, through

console.log(this.props.topmenudata[0]["baudrate"])

i get the following returned

Cannot read property 'baudrate' of undefined

i have checked the type of data i am getting through

typeof(this.props.topmenudata[0])

and it shows that i am definitely getting an object

what am i missing here? is there something im missing in the componentdidupdate method?

@Riddhi yes it returns cannot read property baudrate of undefined — Dustyik, Feb 11 '20 at 05:41

GiorgiosJames · Accepted Answer · 2020-02-11T05:52:32.707

Put your console.log inside a check that your object exists. It is likely that the first time componentDidUpdate is called, topmenudata is an empty list. Then in some future update, the list is populated and you get the valid data you see in your first console.log. In your example where you try and get baudrate, you never get to the future componentDidUpdate calls because the first one produces an execution-breaking error.

componentDidUpdate(prevProps) {
    if (this.props.topmenudata && this.props.topmenudata.length > 0) {
        console.log(this.props.topmenudata[0]);
    }
}

Edit:

And this isn't part of your question, but you'll soon come across another issue with your code where your componentDidUpdate code will trigger every time your component updates, and not just when the props are different.

This is because the comparison you do in prevProps !== this.props will always evaluate to true because you are comparing object references. In Javascript, {} === {} is false.

You instead want to check the equality of two primitive types (like strings or numbers) from within your prevProps and this.props, where you only want your code to run if they update. Something like:

componentDidUpdate(prevProps) {
    if (this.props.topmenudata && this.props.topmenudata.length > 0) {
        let propsHaveChanged = false;
        this.props.topmenudata.forEach((serialInfo, index) => {
            if (!prevProps.topmenudata[index]) return;

            if (prevProps.topmenudata[index].baudrate !== serialInfo.baudrate) {
                propsHaveChanged = true;
            }
        });

        if (propsHaveChanged) {
            // run my code
        }
    }
}

Though this get's pretty complex pretty quickly, so if you're not confident, I'd recommend you look into pre-built deep-compare functions like the ones provided by underscore.js or lodash.js.

React: Componentdidupdate, Unable to access object value

1 Answers1