R

App.js

@@ -64,6 +64,7 @@ const queryBase = "https://api.census.gov/data/2020/acs/acs5/profile?get=group"
 const queryEnd = "&in=state:72"
 var table = ""
 var pueblo = ""
+var year = ""
 
 
 function updateTable(value){
@@ -74,6 +75,10 @@ function updatePueblo(value){
 	pueblo = value
 }
 
+function updateYear(value) {
+	year = value
+}
+
 //calls data query
 function loadDoc(query) {
   var xhttp = new XMLHttpRequest();
@@ -341,6 +346,33 @@ function Picker() {
 	{label: 'Yauco', value: '153'}
   ]);
   
+  
+  const [openYear, setOpenYear] = useState(false);
+  const [valueYear, setValueYear] = useState(null);
+  const [year, setYear] = useState([
+    {label:'2000', value: '2000'},
+    {label:'2001', value: '2001'},
+	{label:'2002', value: '2002'},
+    {label:'2003', value: '2003'},
+	{label:'2004', value: '2004'},
+    {label:'2005', value: '2005'},
+	{label:'2006', value: '2006'},
+    {label:'2007', value: '2007'},
+	{label:'2008', value: '2008'},
+    {label:'2009', value: '2009'},
+	{label:'2010', value: '2010'},
+    {label:'2011', value: '2011'},
+	{label:'2012', value: '2012'},
+    {label:'2013', value: '2013'},
+	{label:'2014', value: '2014'},
+    {label:'2015', value: '2015'},
+	{label:'2016', value: '2016'},
+    {label:'2017', value: '2017'},
+	{label:'2018', value: '2018'},
+    {label:'2019', value: '2019'},
+	{label:'2020', value: '2020'}
+  ]);
+  
 
   return (
   <View>
@@ -354,7 +386,7 @@ function Picker() {
 	  onChangeValue = {(valueTable) => {
 		updateTable(valueTable);
 		}}
-	  onOpen = {() => {setOpenPueblo(false)}}
+	  onOpen = {() => {setOpenPueblo(false);setOpenYear(false)}}
 	  zIndex={3000}
 	  zIndexInverse={1000}
 	  placeholder="Tabla de Datos"
@@ -371,13 +403,29 @@ function Picker() {
 	  onChangeValue = {(valuePueblo) => {
 		updatePueblo(valuePueblo);
 		}}
-	  onOpen = {() => {setOpenTable(false)}}
-	  zIndex={1000}
-      zIndexInverse={3000}
+	  onOpen = {() => {setOpenTable(false);setOpenYear(false)}}
+	  zIndex={2000}
+      zIndexInverse={2000}
 	  placeholder="Pueblo"
 	  searchPlaceholder="Busqueda..."
     />
 	
+	 <DropDownPicker
+      open={openYear}
+      value={valueYear}
+      items={year}
+      setOpen={setOpenYear}
+      setValue={setValueYear}
+      setItems={setYear}
+	  onChangeValue = {(valueYear) => {
+		updateYear(valueYear);
+		}}
+	  onOpen = {() => {setOpenPueblo(false);setOpenTable(false)}}
+	  zIndex={1000}
+	  zIndexInverse={3000}
+	  placeholder="20xx"
+    />
+	
 	</View>
   );
 }