Javascript object destructoring not working within react this.props

Question

I just learned about object destructoring a few days ago with simple object and that worked fine. However when I try to use it in react on this.props, it returns undefined for all my variables, I'm not really certain what I am doing wrong here. Any help is much appreciated. Cheers.

render() {
    console.log("the properties from props", this.props.currentTeam);
    const {
        metaDataUpdated,
        metaDataUpdating,
        needsToResetUpdateMessage
    } = this.props.currentTeam;
    console.log(
        `metadata updated? ${metaDataUpdated}   --- is metaDataUpdating? ${metaDataUpdating} --- need to update message ${needsToResetUpdateMessage}`
    );

Answer 1

Your console.log statements are looking at two different things and console.log is not reliable at showing things at a specific point in time. If you want to debug things like this, try using this instead:

console.log(JSON.stringify(this.props.currentTeam)));
console.log(JSON.stringify(metaDataUpdated));

Then you'll probably see that there is consistency in the values and your problem is most likely something else having to do with the React lifecycle or the way you are updating the props or state.