Dromediansk

export const getAllCountries = async () => {
  try {
    const response = await fetch(`https://restcountries.eu/rest/v2/all`);
    const responseCountries = await response.json();
    return responseCountries;
  } catch (err) {
    console.log(err);
  }
};

Dromediansk

const [countries, setCountries] = useState([]);
const componentIsMounted = useRef(true);

  useEffect(() => {
    getAllCountries()
      .then(response => {
        if (componentIsMounted.current) {
          setCountries(response);
        }
      })

Dromediansk

const CountriesContainer = () => {
  const [countries, setCountries] = useState([]);
  const componentIsMounted = useRef(true);
  const [filterInput, setFilterInput] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
    {
      name: "",
      capital: "",
      population: ""
    }

Dromediansk

import React from "react";
import "./AdvancedFilter.css";

const AdvancedFilter = ({ searchValue, handleChangeValue }) => (
  <form className="filter-container">
    <input
      data-testid="filter-input-name"
      type="text"
      name="name"
      value={searchValue.name}

Dromediansk

const filterCountries = list => {
    return list.filter(item => {
      return (
        item.name
          .toLowerCase()
          .includes(
              filterInput.name.toLowerCase()
          ) &&
        item.capital
          .toLowerCase()

Dromediansk

return (
    <>
      <AdvancedFilter
        searchValue={filterInput}
        handleChangeValue={handleFilterCountries}
      />
      <div className="countries-container">
        {countriesList.map(country => (
          <CountryCard key={country.numericCode} country={country} />
        ))}

Dromediansk

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.register();

Dromediansk

import React from "react";
import "./Navbar.css";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <nav className="nav-container">
      <ul className="nav-unordered-list">
        <li className="nav-list-item">
          <NavLink to="/">Home</NavLink>

Dromediansk

import React, { lazy, Suspense } from "react";
import "./App.css";
import CountriesContainer from "./routes/CountriesContainer";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
import Navbar from "./components/Navbar";
import NotFoundPage from "./routes/NotFoundPage";

// pages
const Home = lazy(() => import("./routes/Home"));
const Favourites = lazy(() => import("./routes/Favourites"));

Dromediansk

const App = () => {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/data" component={CountriesContainer} />
          <Route path="/favourites" component={Favourites} />
          <Route component={NotFoundPage} />
        </Switch>