const showing as undefined ONLY when destructuring, NOT when reassigning to another const

Question

UPDATE: The problem was my initial state is an empty array, so for some reason it was only a problem when trying to destructure, but I change const lastMessage = messages.slice(-1)[0]; to const lastMessage = messages.slice(-1)[0] || {}; per some advice from someone on another platform, and all is good. My fault and I should've seen it, but was thrown off by reassignment working out just fine. Thank you for the help. I'd vote on your comments and answers, but my rep is too low. You are appreciated!

So I'm building a MERN based chat app with Redux. I'm trying to pull out data from the last message in my DB, and then pass that data as props to a component in React. The problem I'm encountering is that when trying to destructure the original const lastMessage, it (lastMessage) shows undefined. Here's what I'm doing:

• 1) Take the original messages prop out of state, that has an array of message objects.
• 2) Use messages.slice(-1)[0] to assign the last object in the array to const lastMessage.
• 3) Then what I WANT to do is destructure lastMessage to pull out the data that I want (text and created), which will be passed down to another component. But if I try this, I get the 'lastMessage is undefined' error. See example below:

export const UserList = props => {
  const { members, messages } = props;
  const lastMessage = messages.slice(-1)[0];
  const { text, date } = lastMessage;
  console.log(text, date);

Error Undefined Here you can see the error that I'm encountering when trying to destructure. Also, I think it's worth noting that I tried destructuring directly from messages.slice(-1)[0] like this: const { text, created } = messages.slice(-1)[0] but that didn't work, same error. That is why I wondered if i needed to make a new const first, for some reason that maybe I was missing, like maybe a delay in the .slice(-1)[0] or something that was making it undefined when trying to pull out the data.

If I simply reassign it as I did in the code below, then it works fine and I can console log the data and it's all there. No errors or issues, so I know it's not a state mapping issue. Everything shows up as expected in state or in console log. What am I missing here?

export const UserList = props => {
  const { members, messages } = props;
  const lastMessage = messages.slice(-1)[0];
  const example = lastMessage;
  console.log(example);

Console Log of example const You can also see this screenshot that shows when I simply reassign a new const example = lastMessage and, then console log that new example const.

Current state Here's a screenshot of my current state if it helps anyone see the whole picture a bit better.

Thank you all in advance for any help you can offer.

Answer 1

I think is because is really empty, what if you first check if messages is not empty like:

if (messages) { 
   ... 
   messages.slice(-1)[0] 
   ... 
}