React JS throw “TypeError: Cannot read property 'name' of undefined” error when i want to access object details

1
votes

I want to show my users details in modal when I click on my users list. I pass the user ID as props to modal and in modal I find the user by javascript find() method and user_id. this method returns my requested user as an Object and I can show it by console.log() but when I want to access to object properties for example "user.name" or "user.email" react thrown an error: TypeError: Cannot read property 'name' of undefined

//users.js code part

{ showUserDetails ? <div className="ModalContainer" >
       <div className="userModal">
           <div className="modalBody">
               <span className="close">X</span>
               <SelectedUser selectedUserId={selectedUserId}/>
           </div>
       </div>
   </div> : <div></div>
}

// SelectedUser.js codes

import React from 'react';
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

const SelectedUser = ({selectedUserId, users}) => {
    let user = users.find(user=> user.id === selectedUserId)
    console.log(user.name)
    return ( 
       <React.Fragment>
            <p><b>Name:</b> {user.name}</p>
            <p><b>User Name:</b> {user.username}</p>
            <p><b>Email:</b> {user.email}</p>
            <p>
                <b>Address:</b> 
                {`  ${user.address.suite}, ${user.address.street}, ${user.address.city}
                [zip Code: ${user.address.zipcode}]
                `}
            </p>
            <p><b>Phone: </b>{user.phone}</p>
            <p><b>WebSite: </b>{user.website}</p>
            <p><b>Company: </b>{user.company.name}</p>
       </React.Fragment>
     );
}

const mapStateToProps = state => ({
    users: Object.values(state.users.users)
})


export default withRouter(connect(mapStateToProps)(SelectedUser));
1
javascriptreactjsreact-redux
Is the SelectedUser component being rendered before the redux store is filled? – Fush
@Saeid! Just wrote you an answer, let me know if its helpful to you. :) – Cool Guy
@ChristopherNgo , sorry Chris, i had a trouble in last days... – Saeid Barzegar
@SaeidBarzegar whatsup friend? – Cool Guy

1 Answers

3
votes

In your SelectedUser component you should check if the users-state is available before rendering.

import React from 'react';
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

const SelectedUser = ({selectedUserId, users}) => {
    let user;
    let content;
    if(users && users.length > 0){
        user = users.find(user=> user.id === selectedUserId);
    } else {
        return <div>Loading....</div>
    }

    if(Object.keys(user).length >= 0){
       content = (<React.Fragment>
            <p><b>Name:</b> {user.name}</p>
            <p><b>User Name:</b> {user.username}</p>
            <p><b>Email:</b> {user.email}</p>
            <p>
                <b>Address:</b> 
                {`  ${user.address.suite}, ${user.address.street}, ${user.address.city}
                [zip Code: ${user.address.zipcode}]
                `}
            </p>
            <p><b>Phone: </b>{user.phone}</p>
            <p><b>WebSite: </b>{user.website}</p>
            <p><b>Company: </b>{user.company.name}</p>
       </React.Fragment>)
   } else {
       content = "Loading"
   }
   return(
      <div>{content}</div>
   )
}

const mapStateToProps = state => ({
    users: Object.values(state.users.users)
})


export default withRouter(connect(mapStateToProps)(SelectedUser));