score:1

Accepted answer

in your reducer just change const initialstate = { data: [], user: null } to const initialstate = { data: [], user: {} }; by making the intial state of user an empty object you can avoid any issues with this.props.user['property'] causing a cannot read property of undefined error.

furthermore you should probably show something else if initially user is an empty object. if you are doing an ajax request to get the user info then think about maybe doing a loading component. you would just need to add a new state to your reducer like so:

const initialstate = { data: [], user: {}, loading: true };

and then once you get the user info back, assuming thats from login user, you can have the reducer set loading: false also you should either be using object.assign or the ... operator to avoid mutating the original state. see http://redux.js.org/docs/recipes/usingobjectspreadoperator.html. updates so your reducers would look like this

const userreducer = (state = initialstate, action) => {
  switch (action.type) {
    case add_user :
      return {
        ...state,
        data: [action.user, ...state.data],
      };
    case update_user :
      return {
        ...state,
        user: action.user,
      };
    case login_user: {
      const user = (action.response.statuscode === 200) ? action.response.user : null;

      console.log(user);

      return {
        ...state,
        user,
        loading: false
      };
    }
    default:
      return state;
  }
};

and then in your userdashboard component

class userdashboardpage extends component {
  render() {
    console.log("userdashboardpage")
    console.log(this.props.users)

    const content = this.props.loading ? '....loading' : <userinfocomponent user={this.props.users} />;
    return (
      <div>
        {content}
      </div>
    );
  }
}

this will make sure it shows loading and then once the user loads it will show the users information.

score:0

is it possible that you wanted to render one userinfocomponent for each entry in the users property.

if users is an array of user objects you might want to do

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

otherwise, either provide an empty object as default value for users (by using defaultprops) or check for existence of a users value in your mapstatetoprops function.


Related Query

More Query from same tag