accessing length of an array inside an object gives me 'TypeError: Cannot read property 'length' of undefined'

Question

I get an error TypeError: Cannot read property 'length' of undefined when trying to access length of an array inside of an object that I get from mapstatetoprops... In my actions folder, i created a function getuserdata that makes an api call and successfully returns an object. in my component i call this.props.getuserdata in componentdidMount, and i mapstatetoprops currentUser state with getUserdata... although tt returns an object, it does not allow me to access the length of one of the properties arrays.... my mapstatetoprops writes:

currentUser: state.currentUser.getUserData

components folder

    class Users extends Component {

  componentDidMount() {
    this.props.getUserData();
    this.props.getOtherUsers();
   }

  render() {
      console.log(this.props.currentUser.myStocks.length,'current user')
      
      return (
      <Container>
      
      </Container>
    )
  }
};
function mapStateToProps(state) {
  return {
   currentUser: state.currentUser.getUserData, 
    filteredUsers: state.filteredUsers.getOtherUsers,
    getUsersError: state.users.getUsersError
  };
}

export default compose(
  connect(mapStateToProps, { getUserData, getOtherUsers }),
  requireAuth
)(Users);

actions folder:

    export const getUserData = () => async (dispatch) => {
   try {
    const { data } = await axios.get('/api/user/profile', {
      headers: { authorization: localStorage.getItem('token') },
    });
    // console.log(data.myStocks[0],'inform')
    dispatch({ type: GET_USER_DATA, payload: data });
  } catch (e) {
    dispatch({
      type: GET_USER_DATA_ERROR,
      serverError: e,
      clientError: 'Something went wrong please refresh try again',
    });
  }
}

Answer 1

If this.props.currentUser is supposed to be obtained by this.props.getUserData() maybe the problem is that you API call is not finish while react use the render method.