diff --git a/frontendreact/src/App.tsx b/frontendreact/src/App.tsx
index 1b7a9f52125d20276e738e7efd834f999562c353..844b657853973b951fc92cff3deda82c1e2b41db 100644
--- a/frontendreact/src/App.tsx
+++ b/frontendreact/src/App.tsx
@@ -1,13 +1,20 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react'
 import './App.css';
 import DropDown  from './components/DropDown';
 
 function App() {
+  const [selectedCountry, changeCountry] = useState<string>("")
+  const countryFunction = (event:React.ChangeEvent<HTMLSelectElement>):void => {
+    changeCountry(event.target.value);
+  }
   return (
     <div className="App">
-      <DropDown geoOption='countries' name='country_name' code='country_code'/>
+      <DropDown geoOption='countries' name='country_name' code='country_code' changeFunction={countryFunction}/>
+      <p> This is our selected country {selectedCountry}</p>
     </div>
   );
 }
 
+
+
 export default App;
diff --git a/frontendreact/src/components/DropDown.tsx b/frontendreact/src/components/DropDown.tsx
index a92aad5226790c6ca46c47fe44d4a1b5326e64d2..95eaea867e996173d288cc992455229faa337d93 100644
--- a/frontendreact/src/components/DropDown.tsx
+++ b/frontendreact/src/components/DropDown.tsx
@@ -4,6 +4,7 @@ interface DropDownProp {
     geoOption: string;
     name: string;
     code: string;
+    changeFunction(event: React.ChangeEvent<HTMLSelectElement>):void;
 }
 
 
@@ -18,7 +19,8 @@ export default function DropDown(props: DropDownProp) {
     }, [props.geoOption]);
     console.log(options);
     return (
-        <select> {options.map((optionItem:any) =><option key={optionItem[props.code]}
+        <select onChange={props.changeFunction}
+        > {options.map((optionItem:any) =><option key={optionItem[props.code]}
          value={optionItem[props.name]}>{optionItem[props.name] + " (" + optionItem[props.code] + ")"}</option>)} </select>
     );
 }
\ No newline at end of file