listing array elements with map() in react native

Question

I am learning app development with React Native using a video tutorial. I have the following issue with this code. I am trying to loop over all elements in the listings array. I am using "map() =>" function to do this, but I keep getting

TypeError: undefined is not a function (evaluating '_listings2.default.map')

The code worked in the video tutorial but does not work with me. Here is the code I use to loop over the elements:

    import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import SearchBar from '../components/SearchBar';
import Categories from '../components/explore/Categories';
import Listings from '../components/explore/Listings'; // <-- Added from video 14
import colors from '../styles/colors';
import categoriesList from '../data/categories';
import listings from '../data/listings';

export default class InboxContainer extends Component {

    static navigationOptions = {
        tabBarLabel: 'EXPLORE',
        tabBarIcon: ({ tintColor, focused }) => (
            <Icon
                name= {focused ? "ios-home" : "ios-home-outline"}
                size= {22}
                color= {tintColor}
            />
        ),
    };

    renderListings() {
        return listings.map((listing, index) => {
            return (
                <View
                    key={`listing-${index}`}
                >
                    <Listings
                        key={`listing-item-${index}`}
                        title={listing.title}
                        boldTitle={listing.boldTitle}
                        listings={listing.listings}
                        showAddToFav={listing.showAddToFav}
                    />
                </View>
            );
        });
    }

    render() {
        return (
            <View style={styles.wrapper}>
                <SearchBar />
                <ScrollView
                    style={styles.scrollview}
                    contentContainerStyle={styles.scrollViewContent}
                >
                    <Text style={styles.heading}>Explore Vmap</Text>
                    <View style={styles.categories}>
                        <Categories categories={ categoriesList } />
                    </View>
                    {this.renderListings()}
                </ScrollView>
            </View>
        );
    }
};

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: colors.white,
    },
    scrollview: {
        paddingTop: 100,
    },
    scrollViewContent: {
        paddingBottom: 80,
    },
    categories: {
    },
    heading: {
        fontSize: 22,
        fontWeight: '600',
        paddingLeft: 20,
        paddingBottom: 20,
        //paddingTop: 10,
        color: colors.gray04,
    },
});

And this is the listings.js file that I use:

    const listings = [
  {
    title: 'Experiences',
    boldTitle: false,
    showAddToFav: true,
    listings: [
      {
        id: 1,
        photo: require('./photos/listing1.png'),
        type: 'BOAT RIDE',
        title: 'Sail past Japan\'s largest port with a certified skipper',
        price: 60,
        priceType: 'per person',
        stars: 29,
      },
      {
        id: 2,
        photo: require('./photos/listing2.png'),
        type: 'CHEESE TASTING',
        title: 'Funny cheesemonger takes you on a Tour de Fromage',
        price: 70,
        priceType: 'per person',
        stars: 4,
      },
      {
        id: 3,
        photo: require('./photos/listing3.png'),
        type: 'BIKE RIDE',
        title: 'Cycling, "KFC" & Drinking for your Seoul',
        price: 47,
        priceType: 'per person',
        stars: 30,
      },
      {
        id: 4,
        photo: require('./photos/listing4.png'),
        type: 'BIKE RIDE',
        title: 'Cycle through side streets with local',
        price: 57,
        priceType: 'per person',
        stars: 70,
      },
      {
        id: 5,
        photo: require('./photos/listing5.png'),
        type: 'SURFING',
        title: 'Surf Bondi\'s waves, then eat & drink like a local',
        price: 61,
        priceType: 'per person',
        stars: 66,
      },
      {
        id: 6,
        photo: require('./photos/listing6.png'),
        type: 'DRAWING CLASS',
        title: 'A drawing/walking tour in Montmartre',
        price: 55,
        priceType: 'per person',
        stars: 15,
      }
    ]
  },
  {
    title: 'Homes',
    boldTitle: false,
    showAddToFav: true,
    listings: [
      {
        id: 6,
        photo: require('./photos/listing6.png'),
        type: 'DRAWING CLASS',
        title: 'A drawing/walking tour in Montmartre',
        price: 55,
        priceType: 'per person',
        stars: 15,
      },
      {
        id: 7,
        photo: require('./photos/listing7.png'),
        type: 'ENTIRE HOUSE - 1 BED',
        title: 'BALIAN TREEHOUSE with beautiful pool',
        price: 72,
        priceType: 'per person',
        stars: 101,
      },
      {
        id: 8,
        photo: require('./photos/listing8.png'),
        type: 'ENTIRE VILLA - 3 BEDS',
        title: 'Casa deRio - Beach and Mountains',
        price: 69,
        priceType: 'per person',
        stars: 119,
      },
      {
        id: 9,
        photo: require('./photos/listing9.png'),
        type: 'ENTIRE HOUSE - 1 BED',
        title: 'Cozy A-Frame Cabin in the Redwoods',
        price: 152,
        priceType: 'per person',
        stars: 320,
      },
      {
        id: 10,
        photo: require('./photos/listing10.png'),
        type: 'ENTIRE GUESTHOUSE - 1 BED',
        title: '1880s Carriage House in Curtis Park',
        price: 116,
        priceType: 'per person',
        stars: 300,
      },
      {
        id: 11,
        photo: require('./photos/listing11.png'),
        type: 'ENTIRE BOAT - 2 BEDS',
        title: 'A Pirate\'s Life for Me Houseboar!',
        price: 182,
        priceType: 'per person',
        stars: 132,
      }
    ]
  },
  {
    title: 'Popular Reservatios',
    boldTitle: true,
    showAddToFav: false,
    listings: [
      {
        id: 12,
        photo: require('./photos/listing12.png'),
        type: "RESERVATION",
        title: 'G\'raj Mahal',
        price: '30',
        priceTitle: 'per person',
        stars: 0,
      },
      {
        id: 13,
        photo: require('./photos/listing13.png'),
        type: "RESERVATION",
        title: 'Le Font',
        price: '30',
        priceTitle: 'per person',
        stars: 0,
      },
      {
        id: 14,
        photo: require('./photos/listing14.png'),
        type: "RESERVATION",
        title: 'The Waiting Room',
        price: '34',
        priceTitle: 'per person',
        stars: 0,
      },
      {
        id: 15,
        photo: require('./photos/listing15.png'),
        type: "RESERVATION",
        title: 'Bar Boulud',
        price: '64',
        priceTitle: 'per person',
        stars: 0,
      }
    ]
  }
];

I want to know what is wrong in this code (and the listings.js file)

Edit: I add all the code that imports the listings.js file.

Answer 1

Using Export Default

At the top of your listing.js file change

const listings = to export default const listings =

and at the top of your InboxContainer file you will need to add:

import listings from '../data/listing.js';

---

Using Just Export

Another way, which is slightly different is exporting without using the default keyword:

At the top of your listing.js file change

const listings = to export const listings =

and at the top of your InboxContainer file you will need to add:

import { listings } from '../data/listing.js';

You will notice the bracket syntax above, this allows you to import multiple objects from a single file, say if you had multiple listing objects that were each exported you could do something like this:

import { listings1, listing2, listings3 } from '../data/listing.js';