Move to components

part2/countries/src/App.js

@@ -1,49 +1,12 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
+import Countries from "./components/Countries";
 
 const App = () => {
   const [query, setQuery] = useState("");
   const [countries, setCountries] = useState([]);
   const [showedCountries, setShowedCountries] = useState([]);
 
-  const CountryData = ({ country }) => {
-    return (
-      <div>
-        <h1>{country.name.official}</h1>
-        <div>Capital: {country.capital}</div>
-        <div>Area: {country.area} km²</div>
-        <h3>Languages:</h3>
-        <ul>
-          {Object.values(country.languages).map((language) => (
-            <li key={language}>{language}</li>
-          ))}
-        </ul>
-        <img src={country.flags.png} alt={`${country.name.common} flag`} />
-      </div>
-    );
-  };
-
-  const Countries = ({ showedCountries }) => {
-    const [country, setCountry] = useState("");
-    if (showedCountries.length === 1) {
-      return <CountryData country={showedCountries[0]} />;
-    } else if (showedCountries.length <= 10) {
-      return (
-        <div>
-          {showedCountries.map((country) => (
-            <div key={country.cca3}>
-              {country.name.common}{" "}
-              <button onClick={() => setCountry(country)}>show</button>
-            </div>
-          ))}
-          {country && <CountryData country={country} />}
-        </div>
-      );
-    } else if (showedCountries.length > 10) {
-      return <div>Too many matches, specify another filter</div>;
-    }
-  };
-
   useEffect(() => {
     axios.get("https://restcountries.com/v3.1/all").then((response) => {
       setCountries(response.data);

part2/countries/src/components/Countries.js

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import CountryData from "./CountryData";
+
+const Countries = ({ showedCountries }) => {
+  const [country, setCountry] = useState("");
+  if (showedCountries.length === 1) {
+    return <CountryData country={showedCountries[0]} />;
+  } else if (showedCountries.length <= 10) {
+    return (
+      <div>
+        {showedCountries.map((country) => (
+          <div key={country.cca3}>
+            {country.name.common}{" "}
+            <button onClick={() => setCountry(country)}>show</button>
+          </div>
+        ))}
+        {country && <CountryData country={country} />}
+      </div>
+    );
+  } else if (showedCountries.length > 10) {
+    return <div>Too many matches, specify another filter</div>;
+  }
+};
+
+export default Countries;

part2/countries/src/components/CountryData.js

@@ -0,0 +1,18 @@
+const CountryData = ({ country }) => {
+  return (
+    <div>
+      <h1>{country.name.official}</h1>
+      <div>Capital: {country.capital}</div>
+      <div>Area: {country.area} km²</div>
+      <h3>Languages:</h3>
+      <ul>
+        {Object.values(country.languages).map((language) => (
+          <li key={language}>{language}</li>
+        ))}
+      </ul>
+      <img src={country.flags.png} alt={`${country.name.common} flag`} />
+    </div>
+  );
+};
+
+export default CountryData;