printed out the selected country

oooof

frontendreact/src/App.tsx

-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;

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