Check option change, numbers dont match up

App.js

@@ -2,7 +2,7 @@ import { StatusBar } from 'expo-status-bar';
 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';
+import DropDownPicker from 'react-native-dropdown-picker';
 
 //where data will be put
 var organizedData
@@ -18,6 +18,10 @@ function organize(){
 	
 }
 
+//fix
+
+DropDownPicker.setListMode("SCROLLVIEW")
+
 //calls data query
 function loadDoc(query) {
   var xhttp = new XMLHttpRequest();
@@ -120,27 +124,32 @@ function updateInfo(option){
 			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")
+			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP03)&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")
+			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP04)&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")
+			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP05)&for=county:127&in=state:72")
 			break;
 		
 	}
 }
 
 
-function DataDisplay({parentOption}) {
-  const [option, setOption] = useState(0);
+
+
+//data display
+
+function DataDisplay({option}) {
+  const [tableValue, setTableValue] = useState(0);
+
 
   useEffect(() => {
-    setOption(parentOption);
-	console.log(option)
-    updateInfo(option);
-  }, [parentOption]); // 👈️ add props as dependencies
+    setTableValue(option * 1);
+	console.log(tableValue)
+    updateInfo(tableValue);
+  }, [option]); // add props as dependencies
 
 
   return (
@@ -148,6 +157,8 @@ function DataDisplay({parentOption}) {
   );
 }
 
+//data pick
+/*
 function Parent() {
   const [parentOption, setParentOption] = useState(0);
 
@@ -173,8 +184,63 @@ function Parent() {
     </View>
   );
 }
+*/
+
+
+//picker test
+
+function Picker() {
+	
+	//table to pick from
+  
+  
+  const [open, setOpen] = useState(false);
+  const [option, setOption] = useState(0);
+  const [value, setValue] = useState(0);
+  const [table, setTable] = useState([
+    {label:'DP02PR', value: 1},
+    {label:'DP03', value: 2},
+	{label:'DP04', value: 3},
+    {label:'DP05', value: 4},
+  ]);
+    
+  //cambiar pueblo
+  
+  /*
+  //pueblo
+  const [open2, setOpen2] = useState(false);
+  const [value2, setValue2] = useState(null);
+  const [pueblo, setPueblo] = useState([
+    {label: 'Apple', value: 'apple'},
+    {label: 'Banana', value: 'banana'}
+  ]);
+  */
+
+  return (
+  <View>
+    <DropDownPicker
+      open={open}
+      value={value}
+      items={table}
+      setOpen={setOpen}
+      setValue={setValue}
+      setItems={setTable}
+	  onChangeValue={(value) => {
+		setOption(current => value);
+		}}
+
+    />
+	
+	<DataDisplay option={option} />
+	
+	</View>
+  );
+}
 
 
+
+//actual application
+
 class App extends React.Component {
 
 
@@ -213,13 +279,13 @@ vars = {
 		
 		dataOp:
 		<View style = {styles.containerbackground}>
-		<ScrollView style={styles.scrollView}>
+		<ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
 		 <View style = {styles.container}>
 			
 		  
 			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
 			
-			<Parent />
+			<Picker />
 			
 			<Image source={require('./testimg.gif')} />