I am using redux for my react app. I am fetching user data from api, updating redux state with it and showing it into my ponent. The data is list of objects. The thing what causes me problem is setting redux initial state.

Reducer initial state:

const initState = {
    users: []
}

Reducer action

case 'GET_USERS':
    return {
        users: action.users
    }
});

Render in ponent

{this.props.users[1].name}

On first rendering i am getting error can't read from undefined property. That is cause on first rendering data isn't stored yet and that object with that property doesn't exist yet. I can solve that if i set initial state like:

const initState = {
    users: [
        {name: "", age: ""},
        {name: "", age: ""}
    ]
}

In that case object with property would exist and i wouldn't get error. But i don't know how many objects i will have and i don't want to set initial state for every of them and theirs properties. So what is the way to properly set it?

I am using redux for my react app. I am fetching user data from api, updating redux state with it and showing it into my ponent. The data is list of objects. The thing what causes me problem is setting redux initial state.

Reducer initial state:

const initState = {
    users: []
}

Reducer action

case 'GET_USERS':
    return {
        users: action.users
    }
});

Render in ponent

{this.props.users[1].name}

On first rendering i am getting error can't read from undefined property. That is cause on first rendering data isn't stored yet and that object with that property doesn't exist yet. I can solve that if i set initial state like:

const initState = {
    users: [
        {name: "", age: ""},
        {name: "", age: ""}
    ]
}

In that case object with property would exist and i wouldn't get error. But i don't know how many objects i will have and i don't want to set initial state for every of them and theirs properties. So what is the way to properly set it?

• javascript
• arrays
• object
• redux

Share Improve this question Follow asked Feb 1, 2019 at 12:54 bobbybobby 45533 gold badges99 silver badges2727 bronze badges 2

• You need iterate the array with a map, for example, and render the item inside the map. In this case, if the array is empty, no rendering would take place. – Ori Drori Commented Feb 1, 2019 at 12:56
• I think you should expand your render method to fully show us what you're attempting to output. – Adrian Lynch Commented Feb 1, 2019 at 12:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Just check if it is present and render conditionally

{this.props.users.length > 1 ? this.props.users[1].name : 'Not enough elements!'}

You shouldn't render a user by its position like that. Either you iterate all users or look into normalizing your data

<div>
  {users.map(user) => (
    <div>{users.name}</div>
  )}
</div>

https://redux.js/recipes/structuring-reducers/normalizing-state-shape

I would use an empty array and check for the [].length property before rendering.

You mention your object structure

{name: "", age: ""}

and then you mention how to access users.name.firstname. If you get an undefined that means your dara hasn't loaded into your users array. So, instantiate with an empty array such as users:[] and add the following:

const YourComponent = (props) => {
  if (users.length === 0){
    return <div> Loading </div>
  }
  return(
    <div>
      {users.map(user => 
        <div>
          {user.name}
        </div>  
      )}
    </div>
  )
}

Your ponent will load before your array will be populated and will return the Loading div. When the array will be filled, the ponent will rerender and will map out your array.