From c88b09d8808726b5b128fc77dfdbd1e41cbd94b6 Mon Sep 17 00:00:00 2001
From: xingyin2024 <xingyin.thu@gmail.com>
Date: Tue, 22 Oct 2024 16:54:43 +0200
Subject: [PATCH] update - fetch data and handlechange

---
 src/components/Countries.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Countries.jsx b/src/components/Countries.jsx
index ee1aeeb..b1028de 100644
--- a/src/components/Countries.jsx
+++ b/src/components/Countries.jsx
@@ -1,12 +1,25 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 export const Countries = () => {
   const [countryCode, setCountryCode] = useState("AU")
   const [data, setData] = useState(null)
 
-  //const URL = `https://restcountries.com/v2/alpha/${countryCode}`
+  const URL = `https://restcountries.com/v2/alpha/${countryCode}`
 
-  const handleChange = (e) => {}
+  
+  useEffect(() => {
+    const fetchCountry = async () => {
+      const response = await fetch(URL)
+      const data = await response.json()
+      setData(data)
+    };
+    
+    fetchCountry()
+  }, [countryCode])
+    
+  const handleChange = (event) => {
+    setCountryCode(event.target.value)
+  }
 
   return (
     <section className="light">