App.jsx

import './App.css';
import { BrowserRouter, Route } from 'react-router-dom';
import CountryDetails from './components/CountryDetails';
import Navbar from './components/Navbar';
import CountryList from './components/CountryList';

import countries from './countries.json';

function App() {
  return (
    <BrowserRouter>
      <div className="wrapper">
        <Navbar />
        <aside>
          <CountryList countries={countries} />
        </aside>
        <main>
          <Route path="/:countryCode" component={CountryDetails} />
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;

CountryDetails.jsx

import React, { Component } from 'react';
import countries from './../countries.json';
import { Link } from 'react-router-dom';

class CountryDetails extends Component {
  state = {
    country: null,
  };

  componentDidMount() {
    this.loadCountry();
  }

  componentDidUpdate(previousProps) {
    if (
      this.props.match.params.countryCode !==
      previousProps.match.params.countryCode
    ) {
      this.loadCountry();
    }
  }

  loadCountry() {
    const countryCode = this.props.match.params.countryCode;
    const country = countries.find((item) => item.cca3 === countryCode);
    this.setState({
      country: country,
    });
  }

  getCountryName(countryCode) {
    return countries.find((item) => item.cca3 === countryCode).name.common;
  }

  render() {
    const country = this.state.country;
    return (
      <div>
        <h1>{this.props.match.params.countryCode}</h1>
        {country && (
          <div>
            <h1>{country.name.common}</h1>
            <table>
              <thead></thead>
              <tbody>
                <tr>
                  <td style={{ width: '30%' }}>Capital</td>
                  <td>{country.capital[0]}</td>
                </tr>
                <tr>
                  <td>Area</td>
                  <td>
                    {country.area} km
                    <sup>2</sup>
                  </td>
                </tr>
                <tr>
                  <td>Borders</td>
                  <td>
                    <ul>
                      {country.borders.map((countryCode) => (
                        <li key={countryCode}>
                          <Link href={`/${countryCode}`}>
                            {this.getCountryName(countryCode)}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        )}
      </div>
    );
  }
}

export default CountryDetails;