Completed 2.13 (data for countries, step 2)

part2/2.12-2.14/src/App.js

@@ -7,10 +7,7 @@ const App = () => {
   
   const [newSearch, setNewSerach] = useState('')
   const [CountryList, setCountryList] = useState([])
-
-  const handleSearchChange  =(event) => {
-    setNewSerach(event.target.value)
-  }
+  const [ResultList, setResultList] = useState([])
 
   useEffect(() => {
     axios
@@ -20,15 +17,28 @@ const App = () => {
     })
   }, [])
 
- 
-  const filtered = CountryList.filter(country => country.name.toLowerCase().includes(newSearch.toLowerCase()))
-  console.log(newSearch.toLowerCase())
+  const clickHandler = (index) => {
+    console.log(index)
+    const newresult = ResultList
+    newresult[index].Show = !newresult[index].Show
+    setResultList([...newresult])
+  }
+  
+  const handleSearchChange = (event) => {
+    setNewSerach(event.target.value)
+  }
+
+  useEffect(() => {
+    const sfilter = CountryList.filter(country => country.name.toLowerCase().includes(newSearch.toLowerCase()))
+    const filter = sfilter.map(item => ({...item,Show:false}))
+    setResultList(filter)
+  }, [newSearch, CountryList])
+
   return (
     <div>
       <h2>Country</h2>
       <Filter value={newSearch} onChange={handleSearchChange} />
-      <Country data={filtered} />
-      
+      <Country data={ResultList} onClick={clickHandler}/>
     </div>
   )
 }

part2/2.12-2.14/src/components/Country.js

@@ -1,26 +1,36 @@
 import React from 'react';
 
-const Country = (props) => {
-    const filtered = props.data
+const Country = ({data,onClick}) => {
+    const list = data.length
+    const clickHandler = (index) => {
+        onClick(index)
+    }
     return (
         <div>
-            {filtered.length > 10 ? 
-          'Too many matches, specific another filter' : filtered.length !== 1 ?
-            filtered.map(item => <CountryLongList key={item.alpha2Code} data={item}/>): 
-            filtered.map(item => <CountryDetail key={item.alpha2Code} data={item}/>)}
+            {list > 10 ? 'Too many matches, specific another filter' :
+            list > 1  ? data.map((item, index) => <CountryLongList key={item.alpha2Code} data={item} onClick={() => clickHandler(index)}/>) :
+            data.map(item => <CountryDetail key={item.alpha2Code} data={item}/>)
+            }
         </div>
         
     )
 }
-const CountryLongList = ({data}) => {
+const CountryLongList = ({data, onClick}) => {
+    const show = data.Show
+    console.log(show)
     return (
-        <div>
-            <p>{data.name}</p>
-        </div>
-    )
+      <div>
+        <p>
+          <span>{data.name}</span>
+          <button onClick={onClick}>
+            {show === false ? "Show" : "Hide"}
+          </button>
+          {show === true && <CountryDetail key={data.alpha2Code} data={data}/>}
+        </p>
+      </div>
+    );
 }
 const CountryDetail = ({data}) => {
-    console.log(data)
     return (
         <div>
             <h2>{data.name}</h2>