title: Displaying data from json file to react-native picker items
body: <p>I can't for the life of me figure out how to map my list of cars to picker items.
  I need it so that when the user selects the year, only car makes of that year come up, then when the users selects a make only models from that make of that year come up and then same with the engine. <strong>Here's some of my JSON file:</strong>
  `</p>
  
  <pre><code>{
      "years": [
          {
              "None": {
                  "None": {
                      "None": [
                          "None"
                      ]
                  }
              }
          },
          {
              "2018": {
                  "Acura": {
                      "ILX": [
                          "2.4L"
                      ],
                      "MDX": [
                          "3.5L"
                      ],
                      "MDX SH-AWD": [
                          "3.5L"
                      ],
                      "MDX Sport Hybrid": [
                          "3.0L"
                      ],
                      "RDX": [
                          "3.5L"
                      ],
                      "RLX": [
                          "3.5L"
                      ],
                      "RLX Sport Hybrid SH-AWD": [
                          "3.5L"
                      ],
                      "TLX": [
                          "2.4L",
                          "3.5L"
                      ],
                      "TLX SH-AWD": [
                          "3.5L"
                      ]
                  },
                  "Alfa Romeo": {
                      "4C": [
                          "1.7L"
                      ],
                      "4C Spider": [
                          "1.7L"
                      ],
                      "Giulia": [
                          "2.0L"
                      ],
                      "Giulia Quadrifoglio": [
                          "2.9L"
                      ],
                      "Giulia TI": [
                          "2.0L"
                      ],
                      "Stelvio": [
                          "2.0L"
                      ],
                      "Stelvio Quadrifoglio": [
                          "2.9L"
                      ],
                      "Stelvio TI": [
                          "2.0L"
                      ]
                  }
              }
          }
      ]
  }
  </code></pre>
  
  <p>`
  <strong>Here is some of my react-native code at the moment:</strong></p>
  
  <pre><code>import React from 'react';
  import { View, ScrollView, Text, TextInput, TouchableOpacity, KeyboardAvoidingView, StyleSheet, AsyncStorage, Picker } from 'react-native';
  
  import { Foot } from '../../../components/Foot';
  import carList from '../../../resources/test.json';
  
  export default class AddCar extends React.Component {
      static navigationOptions = ({ navigation }) =&gt; ({
          title: typeof (navigation.state.params) === 'undefined' || typeof (navigation.state.params.title) === 'undefined' ? '' : navigation.state.params.title,
          headerRight: &lt;View&gt;&lt;/View&gt;
      });
      constructor(props) {
          super(props);
          this.state = {
              hasLoaded: false,
  
              name: '',
  
              cars: [],
  
              Year: 'None',
              Make: 'None',
              Model: 'None',
              Engine: 'None',
          }
      }
  
      componentDidMount() {
          this._loadInitialState().done();
      }
  
      _loadInitialState = async () =&gt; {
  
          var user = await AsyncStorage.getItem('user');
          if (user !== null) {
              const UserInfo = JSON.parse(user);
  
              this.setState({ name: UserInfo['name'] });
  
              this.props.navigation.setParams({ title: this.state.name });
          }
  
          this._getCarList().done();
  
      }
  
      _getCarList = async () =&gt; {
          this.setState({ cars: carList });
          console.log(this.state.cars);
          this.setState({ hasLoaded: true });
  
      }
  
      render() {
          return (
              &lt;KeyboardAvoidingView behavior='padding' style={styles.container}&gt;
  
                  &lt;ScrollView&gt;
  
                      &lt;View style={styles.content}&gt;
  
                          &lt;View style={styles.selector}&gt;
                              &lt;Text style={styles.label}&gt;Year:&lt;/Text&gt;
                              &lt;View style={styles.dropContainer}&gt;
                                  {this.state.hasLoaded &amp;&amp;
                                      &lt;Picker
                                          style={styles.dropdown}
                                          selectedValue={this.state.Year}
                                          onValueChange={(itemValue, itemIndex) =&gt; this.setState({ Year: itemValue })} &gt;
                                          {this.state.cars.map((item, value) =&gt; {
                                              console.log(item + " " + value);
                                              return (&lt;Picker.Item label={item} value={value} key={value} /&gt;)
                                          })}
                                      &lt;/Picker&gt;
                                  }
                              &lt;/View&gt;
                          &lt;/View&gt;
  
                          &lt;View style={styles.selector}&gt;
                              &lt;Text style={styles.label}&gt;Make:&lt;/Text&gt;
                              &lt;View style={styles.dropContainer}&gt;
                                  &lt;Picker style={styles.dropdown}
                                      selectedValue={this.state.Make}
                                      onValueChange={(itemValue) =&gt; this.setState({ Make: itemValue })} &gt;
  
                                  &lt;/Picker&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
  
                          &lt;View style={styles.selector}&gt;
                              &lt;Text style={styles.label}&gt;Model:&lt;/Text&gt;
                              &lt;View style={styles.dropContainer}&gt;
                                  &lt;Picker style={styles.dropdown}
                                      selectedValue={this.state.Model}
                                      onValueChange={(itemValue) =&gt; this.setState({ Model: itemValue })} &gt;
  
                                  &lt;/Picker&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
  
                          &lt;View style={styles.selector}&gt;
                              &lt;Text style={styles.label}&gt;Engine:&lt;/Text&gt;
                              &lt;View style={styles.dropContainer}&gt;
                                  &lt;Picker style={styles.dropdown}
                                      selectedValue={this.state.Model}
                                      onValueChange={(itemValue) =&gt; this.setState({ Model: itemValue })} &gt;
                                      &lt;Picker.Item label="None" value="None" /&gt;
                                  &lt;/Picker&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
  
                      &lt;/View&gt;
  
                  &lt;/ScrollView&gt;
  
                  &lt;Foot /&gt;
              &lt;/KeyboardAvoidingView&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          width: '100%',
          flex: 1,
          backgroundColor: '#FFF',
      },
      content: {
          flex: 1,
          width: '100%',
          position: 'relative',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#FFF',
          marginTop: '18%',
      },
      selector: {
          width: '65%',
          flexDirection: 'row',
          marginTop: 5,
          padding: 3,
      },
      label: {
          flex: .35,
          fontSize: 16,
          alignSelf: 'flex-start',
          textAlign: 'left',
          top: 15,
      },
      dropContainer: {
          flex: .65,
          width: 20,
          borderColor: '#F0F0F0',
          borderWidth: 1,
          borderRadius: 2,
          elevation: 3,
          backgroundColor: '#FEFEFE',
      }
  });
  </code></pre>