Cannot read property from props in react component - node.js

Question

In ChatRoom Component, I am trying to load chat between 2 users to render the names of users of the chat. To get the chat, I am firing off getCurrentChat function.
ChatRoom Component
// importing everything
import { getCurrentChat } from '../../actions/chatActions';
class ChatRoom extends Component {
componentDidMount() {
// loading chat between 2 people
this.props.getCurrentChat(this.props.match.params.chatId);
};
render() {
const { loadingCurrentChat } = this.props.chat;
console.log(this.props.chat.currentChat);
return (
<div className="container">
{loadingCurrentChat ? <Spinner /> : (
<div className="row">
<h3>ChatId: {this.props.chat.currentChat._id}</h3>
<h2>Chat between {this.props.chat.currentChat.user1.name} и {this.props.chat.currentChat.user2.name}</h2>
</div>
)}
</div>
)
}
}
const mapStateToProps = (state) => ({
auth: state.auth,
chat: state.chat
});
export default connect(mapStateToProps, { getCurrentChat })(withRouter(ChatRoom));
chatActions.js
export const getCurrentChat = (chatId) => (dispatch) => {
dispatch(setLoadingCurrentChat());
axios.get(`/chat/${chatId}`)
.then(res =>
dispatch({
type: GET_CURRENT_CHAT,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err
})
);
};
chatReducer.js
// importing everything
const initialState = {
currentChat: {},
loadingCurrentChat: false,
};
export default function (state = initialState, action) {
switch (action.type) {
case SET_LOADING_CURRENT_CHAT:
return {
...state,
loadingCurrentChat: true
}
case GET_CURRENT_CHAT:
return {
...state,
currentChat: action.payload,
loadingCurrentChat: false
}
}
}
server file where I handle requests from chatActions.js -
chatController.js
// requiring everything
exports.getCurrentChat = (req, res) => {
const chatId = req.params.chatId;
Chat.findById(chatId)
.populate('user1')
.populate('user2')
.exec()
.then(chat => res.json(chat))
.catch(err => res.status(400).json(err));
};
When I try console.log the currentChat in ChatRoom, it correctly shows the chat.
currentChat:
messages: []
user1: {
_id: "5d1328a91e0e5320706cdabb",
name: "sarvar",
}
user2: {
_id: "5d131405ce36ce0ebcf76ae1",
name: "jalol makhmudov"
}
__v: 0
_id: "5d329aea3f34fe0b8c6cf336"
If I render currentChat._id (see <h3> element in ChatRoom) it correctly displays it.
But if I render currentChat.user1.name and currentChat.user2.name (see <h2> element in ChatRoom) it gives an error
TypeError: Cannot read property 'name' of undefined

Answer 1

Solution
Initialize state with a more accurate shape.
const initialState = {
currentChat: {
user1: {}
},
loadingCurrentChat: false,
};
If you cannot do that, put a check like currentChat.user1 && currentChat.user1.name before accessing it in JSX.
Explanation
getCurrentChat is a request which means it will take time to fetch the data. React does not wait for the request to be completed for rendering. One of the reasons why we define initialState is because while the request is being completed, React uses initialState to render.
In your case, initialState is defined as,
const initialState = {
currentChat: {},
loadingCurrentChat: false,
};
In JavaScript, when you define an empty object currentChat: {}, you can access its immediate child without any error. Therefore currentChat._id is accessible but since currentChat.user1 is undefined, currentChat.user1.name will throw an error.