TypeError: Cannot read property 'map' of undefined, How do i rectify this?

Question

I'm using React and Redux to fetch data from my parse server. The dispatch is being dispatched fine but im not able to display the data from mapstatetoprops in the function. Is there something im missing out? Please help me out from this

This is my Component Profileheader.js

 import React,{useEffect} from 'react'; import Cover_Image from './Cover_Image.jpg'; import Profile_Pic from './Profile_Pic.svg'; import './ProfileHeader.css'; import {connect} from 'react-redux'; import {fetchUserProfile} from '../../Redux/UserProfile-Redux/UserProfileActionMethods'; function ProfileHeader({Data,fetchUserProfile}){ useEffect(()=>{fetchUserProfile();},[]); return Data.isLoading? (<h2>Loading...</h2>): Data.error? (<h2>{Data.error}</h2>): ( <div> { Data.userprofiles.map((user)=>{ return( <div> <p>{user.attributes.handle}</p> </div> ) }) } </div> ) } const mapStatetoProps = (state) =>{ return{ //from the rootreducer Data:state.UserProfile } } const mapDispatchtoProps = (dispatch) =>{ return{ fetchUserProfile:()=>{dispatch(fetchUserProfile())},dispatch, } } export default connect(mapStatetoProps,mapDispatchtoProps)(ProfileHeader)

It's Action Methods,

 import Parse from 'parse/dist/parse.min.js'; import { FETCH_USERPROFILE_FAILURE, FETCH_USERPROFILE_REQUEST, FETCH_USERPROFILE_SUCCESS } from './UserProfileActions'; const params = {username:"prvnngrj"} export const fetchUserProfileRequest = () => { return{ type:FETCH_USERPROFILE_REQUEST } } export const fetchUserProfileSuccess = (userprofiles) =>{ return{ type:FETCH_USERPROFILE_SUCCESS, payload:userprofiles } } export const fetchUserProfileFailure = (error) =>{ return{ type:FETCH_USERPROFILE_FAILURE, payload:error } } export const fetchUserProfile = () => { return async dispatch =>{ dispatch(fetchUserProfileRequest()) try{ const responsedata = await Parse.Cloud.run("GetUserProfileForUsername", params); const userprofiles = responsedata; dispatch(fetchUserProfileSuccess(userprofiles)) } catch(error){ const errorMessage = error.message dispatch(fetchUserProfileFailure(errorMessage)) } } }

This is the reducer.

 import { FETCH_USERPROFILE_FAILURE, FETCH_USERPROFILE_REQUEST, FETCH_USERPROFILE_SUCCESS } from "./UserProfileActions" const initialState = { isLoading:false, userprofiles:[], error:'' } export const UserProfileReducer = (state=initialState,action)=>{ switch(action.type){ case FETCH_USERPROFILE_REQUEST: return{...state, isLoading:true } case FETCH_USERPROFILE_SUCCESS: return{ isLoading:false, usersprofiles:action.payload, error:'' } case FETCH_USERPROFILE_FAILURE: return{ isLoading:false, usersprofiles:[], error:action.payload } default: return state } }

EDIT: Sorry for the error, I had mispelt userProfiles in userReducer so it couldn't accept the data. The solution is figured.! Thank you so much for your time.

Answer 1

The Data.userProfiles is either not an array or null. Check the type or ensure that it is initialized to an empty array.

Answer 2

I would add another check for null|undefined and array has items for userprofiles

return Data.isLoading ? (<h2>Loading...</h2>) :
            Data.error ? (<h2>{Data.error}</h2>) :
            Data.userprofiles && Data.userprofiles.length > 0 ? 
            (
                 <div>.....</div>
            ) : null
 

Answer 3

By the time you are mapping the content of Data.userprofiles is undefined. Try optional chaining like so:

Data?.userprofiles?.map((user) => {
...