Display array of objects in React Native Expo

Question

I have a requirement that will display the office details of a user. However, I have been getting error "Cannot read property map of undefined" while looping office_details using map. In my console, office_details has a value -- please see screenshot below. Code below wont work. In firebase, office_details is an array.

 { this.props.singleConsultant.office_details.map(({ office_days, office_hour_from, office_hour_to },i ) => (
        <View key={i}>
          {office_days.map((office_day, j) =>  <Text key={j}>{office_day}</Text>) }
          
        </View>
      ) )
  }

import { Text, View, ScrollView, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import StarRating from 'react-native-star-rating';
import { profileStyles, globalStyles } from '../styles/styles';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {  getConsultant } from '../actions/consultant';
class ProfileTab extends Component {
  
  constructor(props){
    super(props);

  
  }
  
  Edit = () => {
    const navigation = this.props.navigation();
    navigation.navigate('EditProfile_1');
  } 
  
  List({items, fallback}){
    if(!items || items.length === 0){
      return fallback
    }else{
      return items.map( item => {
        return <View style={profileStyles.profile_hours_details}>
                <Text> {items.office_location} {"\n"}
                        {item.office_hour_from} - {item.office_hour_to}
                        
                </Text>
              </View>
      })
    }

  }


  render(){
    // if(this.props.singleConsultant){
    //   var user = this.props.singleConsultant;
    //   if(user.office_details){
    //     var office_details = user.office_details;
    //   }
    // }
  
  //const user = Array.from(this.props.singleConsultant);
    const user = this.props.singleConsultant;

    //user.office_details = [];
    
    //const user = ([])
    
    //const officeDetails = user.office_details;
    console.log("Profile ab na ni");
    console.log(this.props.singleConsultant);
    //console.log(user);
    
    //console.log(this.props.singleConsultant);
    //console.log(user.office_details);
    
    // const office = Array.from(user.office_details);
    //console.log(user.data());
    
    return (
      
    <View style={profileStyles.container}>
         
    <View style={profileStyles.header_container}>
 <View style={profileStyles.header_text_container}>
 <Text style={profileStyles.header_text_bold}>MY PROFILE: {user.fullName} </Text>
 </View>
</View>
<View style={profileStyles.scaffold}>
 <View style={profileStyles.profile_container}>
   <ScrollView
     showsVerticalScrollIndicator={false}
     contentContainerStyle={{
       padding: 14,
       marginTop: 10,
       borderRadius: 15,
       backgroundColor: '#fff',
     }}
   >
     <View style={profileStyles.profile_officeimg_container}>
       <Image
         source={user.profilePicture}
         style={profileStyles.profile_officeimg}
       />
     </View>
     <View style={profileStyles.profile_b_info_container}>
       <Text style={profileStyles.profile_b_info_header}>Basic Information</Text>
       <View style={profileStyles.profile_b_info_details_container}>
         <View style={profileStyles.profile_b_info_profileimg_container}>
           <Image
             source={user.profilePicture}
             style={profileStyles.profile_b_info_profileimg}
           />
         </View>
         <View style={profileStyles.profile_b_info_details}>
           <Text >
             Specialty: {user.userSpecialty} 
             Name: {user.fullName} {"\n"}
             Email: {user.email}{"\n"}
             Mobile Number: {user.mobileNumber}
           </Text>
         </View>
       </View>
     </View>
     <View style={profileStyles.profile_rating_container}>
       <Text style={profileStyles.profile_rating_header}>Overall Rating</Text>
       <View style={profileStyles.profile_rating_details}>
         <StarRating
           disabled={true}
           maxStars={5}
           rating={4}
           selectedStar={() => { }}
           fullStarColor='#FDBB3B'
           starSize={12}
           starStyle={{}}
         />
       </View>
     </View>
     <View style={profileStyles.profile_hours_container}>
       <Text style={profileStyles.profile_hours_header}>Office Hours</Text>
       <View style={profileStyles.divider} />
{ this.props.singleConsultant.office_details.map(({ office_days, office_hour_from, office_hour_to },i ) => (
        <View key={i}>
          {office_days.map((office_day, j) =>  <Text key={j}>{office_day}</Text>) }

        </View>
      ) )
  }
      
       <View style={profileStyles.profile_hours_details}>
         <Text>
           Manila, Philippines 321 St. xab Bldg.{"\n"}
           Saturday, Monday, Friday{"\n"}
           7:30 AM - 11:00 PM
         </Text>
       </View>
       <View style={profileStyles.profile_hours_details}>
         <Text>
           Manila, Philippines 111 St. xxx Bldg.{"\n"}
           Sunday, Wednesday, Friday{"\n"}
           9:00 AM - 1:30 PM
         </Text>
       </View>
     </View>
     <View style={profileStyles.divider} />
     <TouchableOpacity
       activeOpacity={0.6}
       style={profileStyles.edit_button}
       onPress={this.Edit}
     >
       <Text style={profileStyles.edit_button_label}>Edit Profile</Text>
     </TouchableOpacity>
     <View style={profileStyles.review_container}>
       <Text style={profileStyles.review_header}>Reviews</Text>
       <View style={profileStyles.review_details}>
         <View style={profileStyles.review_details_header}>
           <Text style={profileStyles.review_details_label}>By John Doe</Text>
           <View style={{ alignSelf: 'flex-start' }}>
             <StarRating
               disabled={true}
               maxStars={5}
               rating={3}
               selectedStar={() => { }}
               fullStarColor='#FDBB3B'
               starSize={12}
               starStyle={{ marginRight: 5 }}
             />
           </View>
         </View>
         <Text style={profileStyles.review_details_text}>
           Bacon ipsum dolor amet flank corned beef pancetta picanha, strip steak pork chop tri-tip ball tip. Capicola bresaola shoulder pork belly pastrami strip steak kevin tenderloin tri-tip ham hock. Meatloaf t-bone biltong meatball. Ball tip drumstick jowl bacon, chislic pig picanha frankfurter buffalo ground round shankle tail jerky.
           Jerky spare ribs rump, turducken alcatra meatball picanha pastrami swine ribeye prosciutto pork belly pork loin frankfurter. Hamburger ribeye meatloaf landjaeger brisket chuck kielbasa chicken pork belly tongue pork chop. Jerky pastrami landjaeger jowl venison, boudin capicola frankfurter drumstick rump ball tip turkey hamburger shankle. Shank sirloin tenderloin, ground round chicken pork brisket beef ribs short ribs. Fatback porchetta ham ham hock. Cupim picanha tenderloin short loin brisket ribeye jerky tail bacon shoulder bresaola chislic tongue short ribs shankle.
           Shoulder kielbasa landjaeger swine, alcatra t-bone chislic pork loin filet mignon bacon fatback salami drumstick cow. Jowl biltong ball tip turkey meatball corned beef cow spare ribs landjaeger prosciutto tri-tip. Ham pig drumstick shoulder burgdoggen. Tail strip steak turducken pig.
         </Text>
       </View>
    
     </View>
   </ScrollView>
 </View>
</View>
</View>

    );
 }
}


const mapDispatchToProps = dispatch => {
  return bindActionCreators({ getConsultant}, dispatch)
}
const mapStateToProps = state => {
    return {
    user : state.user,
    consultant: state.consultant,
    singleConsultant: state.singleConsultant
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(ProfileTab);
//export default HomeClient;
[See screenshot here][1]


  [1]: https://i.stack.imgur.com/59Cyk.png

Answer 1

Remove the 's' from "office_days" (in the first mapping)