I have an react app, and using redux and props to get array of objects into my ponent, and i am getting them. But i can't access particular property inside of one of objects that are in that array.

With this:

console.log(this.props.users)

I get listed array with all objects inside it. But when i need to access particular object or property of that object, for example:

console.log(this.props.users[0])
console.log(this.props.users[0].name)

I am getting error:

Cannot read property '0' of undefined

But when I iterate through array with map() method i have access to it, it works. Why can't i access it normally?

I have an react app, and using redux and props to get array of objects into my ponent, and i am getting them. But i can't access particular property inside of one of objects that are in that array.

With this:

console.log(this.props.users)

I get listed array with all objects inside it. But when i need to access particular object or property of that object, for example:

console.log(this.props.users[0])
console.log(this.props.users[0].name)

I am getting error:

Cannot read property '0' of undefined

But when I iterate through array with map() method i have access to it, it works. Why can't i access it normally?

• javascript
• arrays
• reactjs
• object
• react-props

• 4 please post console output for the first console statemet – Ravi Theja Commented Jan 31, 2019 at 16:28
• 2 What does your array of objects look like? – Bodrov Commented Jan 31, 2019 at 16:28
• 1 can you please show us the users object structure ? – Aziz.G Commented Jan 31, 2019 at 16:29
• 3 What does console.log(this.props.users) show? – jrswgtr Commented Jan 31, 2019 at 16:29
• 2 You are either not connecting your ponent to the store correctly or, if props.users is loaded asynchronously, you may be trying to access an entry in an array that has not loaded yet. Post your ponent code. – Max Commented Jan 31, 2019 at 16:33

3 Answers 3

You are trying to access properties of this.props.users before it has loaded. Your ponent renders without waiting for your data to fetch. When you console.log(this.props.users) you say that you get an array, but above that, it probably logs undefined at least once when the ponent renders before this.props.users has loaded.

You have a couple of options. You can either do this at the very top of your render method to prevent the rest of the code in the method from executing:

if (!this.props.users) return null;

Once the data is fetched and props change, the render method will be called again.

The other option is to declare a default value, of an empty array for users in your reducer.

Might be when you are executing that line this.props.users is undefined. Check the flow where you have added console.log(this.props.users[0])

const App = () => {
  
  const example = () => {
    const data =[{id:1 ,name: "Users1", description: "desc1"}, 
                {id:2 ,name: "Users2", description: "desc2"}];
    return (
      <div>
      {data.map(function(cValue, idx){
          console.log("currentValue.id:",cValue.id);
          console.log("currentValue.name:",cValue.name);
          console.log("currentValue.description:",cValue.description);
         return (<li key={idx}>name = {cValue.name} description = {cValue.description}</li>)
      })}
      </div>
      );
    }

  return(
    <p style = {{color:'white'}}>
      {example()}
    </p>
  );
}

export default App;