restructured folder

part2/2.12-2.14/src/App.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import Filter from './components/Filter'
+
+const App = () => {
+  
+  const [newSearch, setNewSerach] = useState('')
+  const [CountryList, setCountryList] = useState([])
+
+  const handleSearchChange  =(event) => {
+    setNewSerach(event.target.value)
+  }
+
+  useEffect(() => {
+    axios
+      .get('https://restcountries.eu/rest/v2/all')
+      .then(response => {
+      setCountryList(response.data)
+      console.log(CountryList)
+    })
+  }, [])
+
+ 
+  const filtered = CountryList.filter(country => country.name.toLowerCase().includes(newSearch.toLowerCase()))
+  console.log(newSearch.toLowerCase())
+  return (
+    <div>
+      <h2>Country</h2>
+      <Filter value={newSearch} onChange={handleSearchChange} />
+      
+      {
+        filtered.length > 10 ? 
+          'Too many matches, specific another filter' : 
+            filtered.map(item => <p key={item.alpha2Code}>{item.name}</p>)
+      }
+      
+    </div>
+  )
+}
+
+export default App