App

App.js

 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { View, Image, StyleSheet, Text, Button, ScrollView } from 'react-native';
+import React, {useState, useEffect} from 'react';
+import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
 import data from './transfer.json' 
-
+import { Dropdown } from 'react-native-element-dropdown';
 
 //where data will be put
 var organizedData
 
 //where data will be stored
-var information = "default text"
+var information = "data goes here"
 
 //organize data make it pretty
 function organize(){
 	
 }
 
-
 //calls data query
-function loadDoc() {
+function loadDoc(query) {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
          information = this.responseText;
+		 console.log(information[6])
 		 organize()
   }
   };
-  xhttp.open("GET", "https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72", true);
+  xhttp.open("GET", query, true);
   xhttp.send();
   
 }
 
-loadDoc()
-
 
+//"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
 
 
 
   },
   scrollView:{
 	  marginHorizontal: 20
+  },
+  listItem:{
+	  fontSize: 30,
+	  color: "white",
+	  textDecorationLines: "underline"
+  },
+  listButtons:{
+	  fontSize: 15,
+	  color: "white",
+	  textDecorationLines: "underline"  
+  },
+  buttonsVer: {
+	  flexDirection: 'column',
+	  justifyContent: 'center',
+	  marginTop: 40,
+	  marginBottom: 30,
+	  margin: 30,
+	  borderColor: "grey",
   }
 });
 
+
 //default button press
 
 const handlePress = () => false
 	return stuff
 }
 
-//states
+//calls update to data in data page
 
-let states = {
+function updateInfo(option){
+	
+	switch(option){
 	
+		case 0:
+			break;
+		case 1:
+			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72")
+			break;
+		case 2:
+			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP03PR)&for=county:127&in=state:72")
+			break;
+		case 3:
+			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP04PR)&for=county:127&in=state:72")
+			break;
+		case 4:
+			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP05PR)&for=county:127&in=state:72")
+			break;
+		
+	}
+}
+
+
+function DataDisplay({parentOption}) {
+  const [option, setOption] = useState(0);
+
+  useEffect(() => {
+    setOption(parentOption);
+	console.log(option)
+    updateInfo(option);
+  }, [parentOption]); // 👈️ add props as dependencies
+
+
+  return (
+    <Text style={styles.sub}>{information}</Text>
+  );
+}
+
+function Parent() {
+  const [parentOption, setParentOption] = useState(0);
+
+  return (
+    <View>
+		<Pressable onPress = {() => setParentOption(current => 1)}>
+			<Text style = {styles.listItem}> DP02PR </Text>
+		</Pressable>
+			
+		<Pressable onPress = {() => setParentOption(current => 2)}>
+			<Text style = {styles.listItem}> DP03PR </Text>
+		</Pressable>
+			
+		<Pressable onPress = {() => setParentOption(current => 3)}>
+			<Text style = {styles.listItem}> DP04PR </Text>
+		</Pressable>
+			
+		<Pressable onPress = {() => setParentOption(current => 4)}>
+			<Text style = {styles.listItem}> DP05PR </Text>
+		</Pressable>
+
+		<DataDisplay parentOption={parentOption} />
+    </View>
+  );
+}
+
+
+class App extends React.Component {
+
+
+vars = {
 		welcome:
 		  
 
 			<Image source={require('./testimg.gif')} />
 			
 		 </View>
-		</ScrollView></View>
-
+		</ScrollView></View>,
 		
-	}
-
-function dataView(){	
-	return (
-	<View style = {styles.containerbackground}>
+		dataOp:
+		<View style = {styles.containerbackground}>
 		<ScrollView style={styles.scrollView}>
 		 <View style = {styles.container}>
+			
 		  
-		  
-			<Text style={styles.intro}>DATADATADATADATADATA</Text>
-		
-			<Text style={styles.sub}>{information}</Text>
-			 
+			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
+			
+			<Parent />
+			
 			<Image source={require('./testimg.gif')} />
 			
 		 </View>
 		</ScrollView></View>
-	)
-}
-
-
-class App extends React.Component {
+		
+		
 
+		
+	}
 //current state
-state = {current: states.welcome}
+state = {current: this.vars.welcome}
 
 //state changing functions
-setHome = () => this.setState({ current: states.welcome })
+setHome = () => this.setState({ current: this.vars.welcome })
 
 
-setData = () => this.setState({current: dataView()})
+setData = () => this.setState({current: this.vars.dataOp})
 
 
-setNews = () => this.setState({ current: states.newsView })
-	
+setNews = () => this.setState({ current: this.vars.newsView })
+
 	
+
 	//render app
    render() {
       return (

package-lock.json

       "version": "1.0.0",
       "dependencies": {
         "@expo/webpack-config": "^0.17.2",
+        "@react-native-picker/picker": "^2.4.8",
         "expo": "^47.0.6",
         "expo-font": "~11.0.1",
         "expo-splash-screen": "~0.17.5",
         "react": "18.1.0",
         "react-dom": "18.1.0",
         "react-native": "0.70.5",
+        "react-native-dropdown-picker": "^5.4.3",
+        "react-native-element-dropdown": "^2.5.0",
         "react-native-web": "~0.18.9"
       },
       "devDependencies": {
         "node": ">=8"
       }
     },
+    "node_modules/@react-native-picker/picker": {
+      "version": "2.4.8",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.8.tgz",
+      "integrity": "sha512-5NQ5XPo1B03YNqKFrV6h9L3CQaHlB80wd4ETHUEABRP2iLh7FHLVObX2GfziD+K/VJb8G4KZcZ23NFBFP1f7bg==",
+      "peerDependencies": {
+        "react": ">=16",
+        "react-native": ">=0.57"
+      }
+    },
     "node_modules/@react-native/assets": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-dropdown-picker": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.3.tgz",
+      "integrity": "sha512-cwZzFcpyx/Stw3lZH2bvXxcsgwkR8c3rRZtOnlvyuN5pAplzA/9AiAxYlnJuspP9VvyU1XMePKOpgcHce6iyhA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-element-dropdown": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-native-element-dropdown/-/react-native-element-dropdown-2.5.0.tgz",
+      "integrity": "sha512-ZlatJ2X0/iR+rgZ9Mcp5KO9JvL9fAI/ZGnbdo07wY0CeqVMxAnAGyj2INEqtwkd81bEHVmWDlhpFgy0xhX6qNQ==",
+      "peerDependencies": {
+        "lodash": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gradle-plugin": {
       "version": "0.70.3",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
         "joi": "^17.2.1"
       }
     },
+    "@react-native-picker/picker": {
+      "version": "2.4.8",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.8.tgz",
+      "integrity": "sha512-5NQ5XPo1B03YNqKFrV6h9L3CQaHlB80wd4ETHUEABRP2iLh7FHLVObX2GfziD+K/VJb8G4KZcZ23NFBFP1f7bg==",
+      "requires": {}
+    },
     "@react-native/assets": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-dropdown-picker": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.3.tgz",
+      "integrity": "sha512-cwZzFcpyx/Stw3lZH2bvXxcsgwkR8c3rRZtOnlvyuN5pAplzA/9AiAxYlnJuspP9VvyU1XMePKOpgcHce6iyhA==",
+      "requires": {}
+    },
+    "react-native-element-dropdown": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-native-element-dropdown/-/react-native-element-dropdown-2.5.0.tgz",
+      "integrity": "sha512-ZlatJ2X0/iR+rgZ9Mcp5KO9JvL9fAI/ZGnbdo07wY0CeqVMxAnAGyj2INEqtwkd81bEHVmWDlhpFgy0xhX6qNQ==",
+      "requires": {}
+    },
     "react-native-gradle-plugin": {
       "version": "0.70.3",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",

package.json

   },
   "dependencies": {
     "@expo/webpack-config": "^0.17.2",
+    "@react-native-picker/picker": "^2.4.8",
     "expo": "^47.0.6",
     "expo-font": "~11.0.1",
     "expo-splash-screen": "~0.17.5",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
+    "react-native-dropdown-picker": "^5.4.3",
+    "react-native-element-dropdown": "^2.5.0",
     "react-native-web": "~0.18.9"
   },
   "devDependencies": {

yarn.lock

     "prompts" "^2.4.0"
     "semver" "^6.3.0"
 
+"@react-native-picker/picker@^2.4.8":
+  "integrity" "sha512-5NQ5XPo1B03YNqKFrV6h9L3CQaHlB80wd4ETHUEABRP2iLh7FHLVObX2GfziD+K/VJb8G4KZcZ23NFBFP1f7bg=="
+  "resolved" "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.8.tgz"
+  "version" "2.4.8"
+
 "@react-native/assets@1.0.0":
   "integrity" "sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ=="
   "resolved" "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz"
   "resolved" "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   "version" "4.5.0"
 
-"lodash@^4.17.11", "lodash@^4.17.13", "lodash@^4.17.14", "lodash@^4.17.15", "lodash@^4.17.20", "lodash@^4.17.21", "lodash@^4.17.4", "lodash@^4.17.5", "lodash@>=3.5 <5":
+"lodash@*", "lodash@^4.17.11", "lodash@^4.17.13", "lodash@^4.17.14", "lodash@^4.17.15", "lodash@^4.17.20", "lodash@^4.17.21", "lodash@^4.17.4", "lodash@^4.17.5", "lodash@>=3.5 <5":
   "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
   "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
     "jscodeshift" "^0.13.1"
     "nullthrows" "^1.1.1"
 
+"react-native-dropdown-picker@^5.4.3":
+  "integrity" "sha512-cwZzFcpyx/Stw3lZH2bvXxcsgwkR8c3rRZtOnlvyuN5pAplzA/9AiAxYlnJuspP9VvyU1XMePKOpgcHce6iyhA=="
+  "resolved" "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.3.tgz"
+  "version" "5.4.3"
+
+"react-native-element-dropdown@^2.5.0":
+  "integrity" "sha512-ZlatJ2X0/iR+rgZ9Mcp5KO9JvL9fAI/ZGnbdo07wY0CeqVMxAnAGyj2INEqtwkd81bEHVmWDlhpFgy0xhX6qNQ=="
+  "resolved" "https://registry.npmjs.org/react-native-element-dropdown/-/react-native-element-dropdown-2.5.0.tgz"
+  "version" "2.5.0"
+
 "react-native-gradle-plugin@^0.70.3":
   "integrity" "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
   "resolved" "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz"
     "postcss-value-parser" "^4.2.0"
     "styleq" "^0.1.2"
 
-"react-native@0.70.5":
+"react-native@*", "react-native@>=0.57", "react-native@0.70.5":
   "integrity" "sha512-5NZM80LC3L+TIgQX/09yiyy48S73wMgpIgN5cCv3XTMR394+KpDI3rBZGH4aIgWWuwijz31YYVF5504+9n2Zfw=="
   "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.70.5.tgz"
   "version" "0.70.5"
     "object-assign" "^4.1.1"
     "react-is" "^16.12.0 || ^17.0.0 || ^18.0.0"
 
-"react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0", "react@^18.1.0", "react@18.1.0":
+"react@*", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0", "react@^18.1.0", "react@>=16", "react@18.1.0":
   "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
   "version" "18.1.0"