console.log this.props show undefined but renders correctly on react redux page

Question

I have a very strange error in react redux project. I have payload

const req = {  
  setcolor:false,
  hours:2,
  searchterm:'',
  dropdownvalue:1,
  dropdownvaluetwo:1,
  rooms:[  
    'private-messages',
    'project2',
    'project3',
    'project4',
    'project5',
    'project6',
    'project7',
    'project8',
    'project9'
  ],
  chatrooms:[  
    {  
      key:1,
      color:false,
      name:'private-messages'
    },
    {  
      key:2,
      color:false,
      name:'project2'
    },
    {  
      key:3,
      color:false,
      name:'project3'
    },
    {  
      key:4,
      color: false,
      name:'project 4'
    },
    {  
      key:5,
      color: false,
      name:'project 5'
    },
    {  
      key:6,
      color: false,
      name:'project 6'
    },
    {  
      key:7,
      color: false,
      name:'project 7'
    },
    {  
      key:8,
      color: false,
      name:'project 8'
    },
    {  
      key:9,
      color: false,
      name:'project 9'
    }
  ],
  projectchat:[  
    {  
      projectname:'private-messages',
      chatmessages:[  
        {  
          username: 'ankur',
          message: 'whatsup'
        },
        {  
          username: 'ankur',
          message: 'kya hal hai'
        }
      ]
    },
    {  
      projectname:'project2',
      chatmessages:[  
        {
          username: 'ankur',
          message: 'whatsup'
        },
        {  
          username: 'ankur',
          message: 'kya hal hai'
        }
      ]
    }
  ]
};

Now, on front end , If i use

<div>
  {this.props.projectlist.hours}
</div>

I see correct value on page which is 2. But, if i do

<div>
{this.props.projectlist.chatrooms[0].name}
</div>

It throws me an error as property undefined.

Now, if i do

<div>
{console.log("this.props",this.props.projectlist}
{this.props.projectlist.chatrooms[0].name}
</div>

This console log shows me undefined. This is really strange error. Either, I am overlooking something very simple or this quirk is related to redux internal working. Can someone help me out?

Answer 1

I am assuming you are getting this req object from an endpoint, or from some kind of async. If this is the case, then there is a point in time when this.props.projectlist is not yet your request object, therefor this.props.projectlist.chatrooms will be undefined, which mean there is no index 0 for chatrooms and so on.

You can solve this by making sure your values are in place before you try and use them.

Something along the lines of

if (this.props.projectlist && this.props.projectlist.chatrooms && this.props.projectlist.chatrooms[0] && this.props.projectlist.chatrooms[0].name ) {
// run my code
}

I find this solution to be longwinded and personally because I use lodash in my javascript projects you can just use lodashs' get , like so ( if you want to use lodash, of course). Alternatively you could try and make a little function to run a null coalesce for you.

 if (_.get(this.props.projectlist, 'chatrooms[0].name', false ) {
// run my code
}

(the third arg here is aa value if any of the nodes are not found/undefined. I've set it to false to pass over this if statement, because our data is not there)

The above examples are for JS, If you want to keep it all inside the jsx you can use the && trick as well , something like :

{this.props.projectlist && this.props.projectlist.chatrooms && this.props.projectlist.chatrooms[0] && this.props.projectlist.chatrooms[0].name &&
 <div>
   {this.props.projectlist.chatrooms[0].name}
 </div>
}

TL:DR - your props probably aren't there the very first render when the console.log is running.