Import a large data set from another file in React Native

Question

I am quite the beginner in React Native and I am trying to fill a DropDownPicker with about 150 names.

As of now I only have 3 but Its going to grow quite large when I add 150 of them. I want to export the items list from another file and import it straight into the DropDownPicker.

I have heard you need to map it first but I am not sure how to do that.

                        items={[
                            {
                                label: "UK",
                                value: "uk",
                                key: "1",
                            },
                            {
                                label: "France",
                                value: "france",
                                key: "2",
                            },
                            {
                                label: "Germany",
                                value: "germany",
                                key: "3",
                            },

                        ]}

import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import DropDownPicker from "react-native-dropdown-picker";

export default class DropDown extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.textContainer}>
                    <Text style={styles.text1}>Chosen country: </Text>
                    <Text style={styles.text2}>{this.state.data}</Text>
                </View>
                <View style={styles.dropContainer}>
                    <DropDownPicker
                        searchable={true}
                        searchablePlaceholder="Search"
                        searchablePlaceholderTextColor="gray"
                        seachableStyle={{}}
                        searchableError={() => <Text>Not found</Text>}
                        items={[
                            {
                                label: "UK",
                                value: "uk",
                                key: "1",
                            },
                            {
                                label: "France",
                                value: "france",
                                key: "2",
                            },
                            {
                                label: "Germany",
                                value: "germany",
                                key: "3",
                            },

                        ]}
                        defaultValue={this.state.data}
                        placeholder="Choose a country"
                        containerStyle={{ width: 200, height: "30%" }}
                        style={{ backgroundColor: "#fafafa" }}
                        itemStyle={{
                            justifyContent: "center",
                        }}
                        labelStyle={{
                            fontSize: 16,
                            textAlign: "left",
                            color: "#000",
                        }}
                        dropDownStyle={{ backgroundColor: "#fafafa" }}
                        onChangeItem={(item) =>
                            this.setState({
                                data: item.value,
                            })
                        }
                    />
                </View>
                <View style={styles.butContainer}>
                    <View style={styles.button}>
                        <TouchableOpacity>
                        <Text style={styles.butText}> Halda áfram</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

Answer 1

There is nothing in the way of doing it like this:

export const countries = [
     {
         id: 1,
         label: 'UK',
         value: 'uk'
     },
     // ..countries
];

// ...imports
import { countries } from 'pathToYourData';

export default class DropDown extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            // ...
            <DropDownPicker
                // ..otherProps
                items={countries}
            />

        );
    }
}

Answer 2

Let's say you create a file called data.json with all your 150 countries:

data.json

[
     {
          label: "FR",
          value: "fr",
          key: "1"
     },
     ...
]

You can simply import it and use it like this:

import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import myData from "data.json";

export default class DropDown extends Component {
    ...    
    render() {
        return (
            <DropDownPicker
                ...
                items={myData}
                ...
            />
        );
    }
}

No need to map or anything, just import it!