add Weather state. not yet finish

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import Weather from './Weather';
 
-const Country = ({data,onClick}) => {
+const Country = ({data,onClick,weather}) => {
     const list = data.length
     const clickHandler = (index) => {
         onClick(index)
@@ -8,35 +9,36 @@ const Country = ({data,onClick}) => {
     return (
         <div>
             {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}/>)
+            list > 1  ? data.map((item, index) => <CountryLongList key={item.alpha2Code} data={item} onClick={() => clickHandler(index)} weather={weather}/>) :
+            data.map(item => <CountryDetail key={item.alpha2Code} data={item} weather={weather}/>)
             }
         </div>
         
     )
 }
-const CountryLongList = ({data, onClick}) => {
+const CountryLongList = ({data, onClick,weather}) => {
     const show = data.Show
     console.log(show)
     return (
       <div>
-        <p>
           <span>{data.name}</span>
           <button onClick={onClick}>
             {show === false ? "Show" : "Hide"}
           </button>
-          {show === true && <CountryDetail key={data.alpha2Code} data={data}/>}
-        </p>
+          <div>{show === true && <CountryDetail key={data.alpha2Code} data={data}/>}
+          </div>
       </div>
     );
 }
-const CountryDetail = ({data}) => {
+const CountryDetail = ({data,weather}) => {
+    console.log(weather)
     return (
         <div>
             <h2>{data.name}</h2>
             <p>
                 Capital: {data.capital}
-                <br />
+            </p>
+            <p>
                 Population: {data.population}
             </p>
             <h3>Languagues</h3>
@@ -44,7 +46,7 @@ const CountryDetail = ({data}) => {
             {data.languages.map(item =><li key={item.name}>{item.name}</li>)}
             </ul>
             <img src={data.flag} alt={data.name} width="200" />
-
+            <Weather weather={weather} capital={data.capital} />
         </div>
     )
 }