[ { "path": ".github/FUNDING.yml", "content": "github: [Asabeneh]\nthanks_dev: \ncustom: []\n\n\n\n# These are supported funding model platforms\n\n# github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\n# patreon: # Replace with a single Patreon username\n# open_collective: # Replace with a single Open Collective username\n# ko_fi: # Replace with a single Ko-fi username\n# tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\n# community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\n# liberapay: # Replace with a single Liberapay username\n# issuehunt: # Replace with a single IssueHunt username\n# lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry\n# polar: # Replace with a single Polar username\n# buy_me_a_coffee: # Replace with a single Buy Me a Coffee username\n# thanks_dev: # Replace with a single thanks.dev username\n# custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n" }, { "path": ".gitignore", "content": "draft.md\nreact-for-everyone.md\ncomponent.md\ndraft\n\n\n\n\n" }, { "path": "01_Day_JavaScript_Refresher/01_javascript_refresher.md", "content": "
\r\n\r\n

30 Days Of React: JavaScript Refresher

\r\n \r\n \r\n \r\n\r\n \r\n \"Twitter\r\n \r\n\r\nAuthor:\r\nAsabeneh Yetayeh
\r\n October, 2020\r\n\r\n\r\n
\r\n\r\n[<< Day 0](../readMe.md) | [Day 2 >>](../02_Day_Introduction_to_React/02_introduction_to_react.md)\r\n\r\n![30 Days of React banner](../images/30_days_of_react_banner_day_1.jpg)\r\n\r\n- [JavaScript Refresher](#javascript-refresher)\r\n - [0. Adding JavaScript to a Web Page](#0-adding-javascript-to-a-web-page)\r\n - [Inline Script](#inline-script)\r\n - [Internal Script](#internal-script)\r\n - [External Script](#external-script)\r\n - [Multiple External Scripts](#multiple-external-scripts)\r\n - [1. Variables](#1-variables)\r\n - [2. Data types](#2-data-types)\r\n - [3. Arrays](#3-arrays)\r\n - [How to create an empty array](#how-to-create-an-empty-array)\r\n - [How to create an array with values](#how-to-create-an-array-with-values)\r\n - [Creating an array using split](#creating-an-array-using-split)\r\n - [Accessing array items using index](#accessing-array-items-using-index)\r\n - [Modifying array element](#modifying-array-element)\r\n - [Methods to manipulate array](#methods-to-manipulate-array)\r\n - [Array Constructor](#array-constructor)\r\n - [Creating static values with fill](#creating-static-values-with-fill)\r\n - [Concatenating array using concat](#concatenating-array-using-concat)\r\n - [Getting array length](#getting-array-length)\r\n - [Getting index of an element in an array](#getting-index-of-an-element-in-an-array)\r\n - [Getting last index of an element in array](#getting-last-index-of-an-element-in-array)\r\n - [Checking array](#checking-array)\r\n - [Converting array to string](#converting-array-to-string)\r\n - [Joining array elements](#joining-array-elements)\r\n - [Slice array elements](#slice-array-elements)\r\n - [Splice method in array](#splice-method-in-array)\r\n - [Adding item to an array using push](#adding-item-to-an-array-using-push)\r\n - [Removing the end element using pop](#removing-the-end-element-using-pop)\r\n - [Removing an element from the beginning](#removing-an-element-from-the-beginning)\r\n - [Add an element from the beginning](#add-an-element-from-the-beginning)\r\n - [Reversing array order](#reversing-array-order)\r\n - [Sorting elements in array](#sorting-elements-in-array)\r\n - [Array of arrays](#array-of-arrays)\r\n - [💻 Exercise](#-exercise)\r\n - [Exercise: Level 1](#exercise-level-1)\r\n - [Exercise: Level 2](#exercise-level-2)\r\n - [Exercise: Level 3](#exercise-level-3)\r\n - [4. Conditionals](#4-conditionals)\r\n - [If](#if)\r\n - [If Else](#if-else)\r\n - [If Else if Else](#if-else-if-else)\r\n - [Switch](#switch)\r\n - [Ternary Operators](#ternary-operators)\r\n - [💻 Exercises](#-exercises)\r\n - [Exercises: Level 1](#exercises-level-1)\r\n - [Exercises: Level 2](#exercises-level-2)\r\n - [Exercises: Level 3](#exercises-level-3)\r\n - [5. Loops](#5-loops)\r\n - [Types of Loops](#types-of-loops)\r\n - [1. for](#1-for)\r\n - [2. while](#2-while)\r\n - [3. do while](#3-do-while)\r\n - [4. for of](#4-for-of)\r\n - [5. forEach](#5-foreach)\r\n - [6. for in](#6-for-in)\r\n - [Interrupting a loop and skipping an item](#interrupting-a-loop-and-skipping-an-item)\r\n - [break](#break)\r\n - [continue](#continue)\r\n - [Conclusions](#conclusions)\r\n - [6. Scope](#6-scope)\r\n - [Window Scope](#window-scope)\r\n - [Global scope](#global-scope)\r\n - [Local scope](#local-scope)\r\n - [7. Object](#7-object)\r\n - [Creating an empty object](#creating-an-empty-object)\r\n - [Creating an objecting with values](#creating-an-objecting-with-values)\r\n - [Getting values from an object](#getting-values-from-an-object)\r\n - [Creating object methods](#creating-object-methods)\r\n - [Setting new key for an object](#setting-new-key-for-an-object)\r\n - [Object Methods](#object-methods)\r\n - [Getting object keys using Object.keys()](#getting-object-keys-using-objectkeys)\r\n - [Getting object values using Object.values()](#getting-object-values-using-objectvalues)\r\n - [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries)\r\n - [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty)\r\n - [💻 Exercises](#-exercises-1)\r\n - [Exercises: Level 1](#exercises-level-1-1)\r\n - [Exercises: Level 2](#exercises-level-2-1)\r\n - [Exercises: Level 3](#exercises-level-3-1)\r\n - [8. Functions](#8-functions)\r\n - [Function Declaration](#function-declaration)\r\n - [Function without a parameter and return](#function-without-a-parameter-and-return)\r\n - [Function returning value](#function-returning-value)\r\n - [Function with a parameter](#function-with-a-parameter)\r\n - [Function with two parameters](#function-with-two-parameters)\r\n - [Function with many parameters](#function-with-many-parameters)\r\n - [Function with unlimited number of parameters](#function-with-unlimited-number-of-parameters)\r\n - [Unlimited number of parameters in regular function](#unlimited-number-of-parameters-in-regular-function)\r\n - [Unlimited number of parameters in arrow function](#unlimited-number-of-parameters-in-arrow-function)\r\n - [Anonymous Function](#anonymous-function)\r\n - [Expression Function](#expression-function)\r\n - [Self Invoking Functions](#self-invoking-functions)\r\n - [Arrow Function](#arrow-function)\r\n - [Function with default parameters](#function-with-default-parameters)\r\n - [Function declaration versus Arrow function](#function-declaration-versus-arrow-function)\r\n - [💻 Exercises](#-exercises-2)\r\n - [Exercises: Level 1](#exercises-level-1-2)\r\n - [Exercises: Level 2](#exercises-level-2-2)\r\n - [Exercises: Level 3](#exercises-level-3-2)\r\n - [9. Higher Order Function](#9-higher-order-function)\r\n - [Callback](#callback)\r\n - [Returning function](#returning-function)\r\n - [setting time](#setting-time)\r\n - [setInterval](#setinterval)\r\n - [setTimeout](#settimeout)\r\n - [10. Destructuring and Spreading](#10-destructuring-and-spreading)\r\n - [What is Destructuring?](#what-is-destructuring)\r\n - [What can we destructure?](#what-can-we-destructure)\r\n - [1. Destructuring arrays](#1-destructuring-arrays)\r\n - [2. Destructuring objects](#2-destructuring-objects)\r\n - [Exercises](#exercises)\r\n - [Spread or Rest Operator](#spread-or-rest-operator)\r\n - [Spread operator to get the rest of array elements](#spread-operator-to-get-the-rest-of-array-elements)\r\n - [Spread operator to copy array](#spread-operator-to-copy-array)\r\n - [Spread operator to copy object](#spread-operator-to-copy-object)\r\n - [Spread operator with arrow function](#spread-operator-with-arrow-function)\r\n - [11. Functional Programming](#11-functional-programming)\r\n - [1. forEach](#1-foreach)\r\n - [2. map](#2-map)\r\n - [3. filter](#3-filter)\r\n - [4. reduce](#4-reduce)\r\n - [5. find](#5-find)\r\n - [6. findIndex](#6-findindex)\r\n - [7. some](#7-some)\r\n - [8. every](#8-every)\r\n - [Exercises](#exercises-1)\r\n - [12. Classes](#12-classes)\r\n - [Defining a classes](#defining-a-classes)\r\n - [Class Instantiation](#class-instantiation)\r\n - [Class Constructor](#class-constructor)\r\n - [Default values with constructor](#default-values-with-constructor)\r\n - [Class methods](#class-methods)\r\n - [Properties with initial value](#properties-with-initial-value)\r\n - [getter](#getter)\r\n - [setter](#setter)\r\n - [Static method](#static-method)\r\n - [Inheritance](#inheritance)\r\n - [Overriding methods](#overriding-methods)\r\n - [Exercises](#exercises-2)\r\n - [Exercises Level 1](#exercises-level-1-3)\r\n - [Exercises Level 2](#exercises-level-2-3)\r\n - [Exercises Level 3](#exercises-level-3-3)\r\n - [13 Document Object Model(DOM)](#13-document-object-modeldom)\r\n\r\n## JavaScript Refresher\r\n\r\n### 0. Adding JavaScript to a Web Page\r\n\r\nJavaScript can be added to a web page in three different ways:\r\n\r\n- **_Inline script_**\r\n- **_Internal script_**\r\n- **_External script_**\r\n- **_Multiple External scripts_**\r\n\r\nThe following sections show different ways of adding JavaScript code to your web page.\r\n\r\n#### Inline Script\r\n\r\nCreate a project folder on your desktop or in any location, name it 30DaysOfJS and create an **_index.html_** file in the project folder. Then paste the following code and open it in a browser, for example [Chrome](https://www.google.com/chrome/).\r\n\r\n```html\r\n\r\n\r\n \r\n 30DaysOfScript:Inline Script\r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\nNow, you just wrote your first inline script. We can create a pop up alert message using the _alert()_ built-in function.\r\n\r\n#### Internal Script\r\n\r\nThe internal script can be written in the _head_ or the _body_, but it is preferred to put it on the body of the HTML document.\r\nFirst, let us write on the head part of the page.\r\n\r\n```html\r\n\r\n\r\n \r\n 30DaysOfScript:Internal Script\r\n \r\n \r\n \r\n\r\n```\r\n\r\nThis is how we write an internal script most of the time. Writing the JavaScript code in the body section is the most preferred option. Open the browser console to see the output from the console.log()\r\n\r\n```html\r\n\r\n\r\n \r\n 30DaysOfScript:Internal Script\r\n \r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\nOpen the browser console to see the output from the console.log()\r\n\r\n![js code from vscode](../images/js_code_vscode.png)\r\n\r\n#### External Script\r\n\r\nSimilar to the internal script, the external script link can be on the header or body, but it is preferred to put it in the body.\r\nFirst, we should create an external JavaScript file with .js extension. All files ending with .js extension. All files ending with .js extension are JavaScript files. Create a file named introduction.js inside your project directory and write the following code and link this .js file at the bottom of the body.\r\n\r\n```js\r\nconsole.log('Welcome to 30DaysOfJavaScript')\r\n```\r\n\r\nExternal scripts in the _head_:\r\n\r\n```html\r\n\r\n\r\n \r\n 30DaysOfJavaScript:External script\r\n \r\n \r\n \r\n\r\n```\r\n\r\nExternal scripts in the _body_:\r\n\r\n```html\r\n\r\n\r\n \r\n 30DaysOfJavaScript:External script\r\n \r\n \r\n //it could be in the header or in the body // Here is the recommended place\r\n to put the external script\r\n \r\n \r\n\r\n```\r\n\r\nOpen the browser console to see the output of the console.log()\r\n\r\n#### Multiple External Scripts\r\n\r\nWe can also link multiple external JavaScript files to a web page.\r\nCreate a helloworld.js file inside the 30DaysOfJS folder and write the following code.\r\n\r\n```js\r\nconsole.log('Hello, World!')\r\n```\r\n\r\n```html\r\n\r\n\r\n \r\n Multiple External Scripts\r\n \r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\n_Your main.js file should be below all other scripts_. It is very important to remember this.\r\n\r\n![Multiple Script](../images/multiple_script.png)\r\n\r\n### 1. Variables\r\n\r\nWe use _var_, _let_ and _const_ to declare a variable. The _var_ is functions scope, however _let_ and _const_ are block scope. In this challenge we use ES6 and above features of JavaScript. Avoid using _var_.\r\n\r\n```js\r\nlet firstName = 'Asabeneh'\r\nfirstName = 'Eyob'\r\n\r\nconst PI = 3.14 // Not allowed to reassign PI to a new value\r\n// PI = 3.\r\n```\r\n\r\n### 2. Data types\r\n\r\nIf you do not feel comfortable with data types check the following [link](https://github.com/Asabeneh/30-Days-Of-JavaScript/blob/master/02_Day_Data_types/02_day_data_types.md)\r\n\r\n### 3. Arrays\r\n\r\nIn contrast to variables, an array can store _multiple values_. Each value in an array has an _index_, and each index has _a reference in a memory address_. Each value can be accessed by using their _indexes_. The index of an array starts from _zero_, and the index of the last element is less by one from the length of the array.\r\n\r\nAn array is a collection of different data types which are ordered and changeable(modifiable). An array allows storing duplicate elements and different data types. An array can be empty, or it may have different data type values.\r\n\r\n#### How to create an empty array\r\n\r\nIn JavaScript, we can create an array in different ways. Let us see different ways to create an array.\r\nIt is very common to use _const_ instead of _let_ to declare an array variable. If you are using const it means you do not use that variable name again.\r\n\r\n- Using Array constructor\r\n\r\n```js\r\n// syntax\r\nconst arr = Array()\r\n// or\r\n// let arr = new Array()\r\nconsole.log(arr) // []\r\n```\r\n\r\n- Using square brackets([])\r\n\r\n```js\r\n// syntax\r\n// This the most recommended way to create an empty list\r\nconst arr = []\r\nconsole.log(arr)\r\n```\r\n\r\n#### How to create an array with values\r\n\r\nArray with initial values. We use _length_ property to find the length of an array.\r\n\r\n```js\r\nconst numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array of numbers\r\nconst fruits = ['banana', 'orange', 'mango', 'lemon'] // array of strings, fruits\r\nconst vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of strings, vegetables\r\nconst animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // array of strings, products\r\nconst webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // array of web technologies\r\nconst countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // array of strings, countries\r\n\r\n// Print the array and its length\r\n\r\nconsole.log('Numbers:', numbers)\r\nconsole.log('Number of numbers:', numbers.length)\r\n\r\nconsole.log('Fruits:', fruits)\r\nconsole.log('Number of fruits:', fruits.length)\r\n\r\nconsole.log('Vegetables:', vegetables)\r\nconsole.log('Number of vegetables:', vegetables.length)\r\n\r\nconsole.log('Animal products:', animalProducts)\r\nconsole.log('Number of animal products:', animalProducts.length)\r\n\r\nconsole.log('Web technologies:', webTechs)\r\nconsole.log('Number of web technologies:', webTechs.length)\r\n\r\nconsole.log('Countries:', countries)\r\nconsole.log('Number of countries:', countries.length)\r\n```\r\n\r\n```sh\r\nNumbers: [0, 3.14, 9.81, 37, 98.6, 100]\r\nNumber of numbers: 6\r\nFruits: ['banana', 'orange', 'mango', 'lemon']\r\nNumber of fruits: 4\r\nVegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']\r\nNumber of vegetables: 5\r\nAnimal products: ['milk', 'meat', 'butter', 'yoghurt']\r\nNumber of animal products: 4\r\nWeb technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB']\r\nNumber of web technologies: 7\r\nCountries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway']\r\nNumber of countries: 5\r\n```\r\n\r\n- Array can have items of different data types\r\n\r\n```js\r\nconst arr = [\r\n 'Asabeneh',\r\n 250,\r\n true,\r\n { country: 'Finland', city: 'Helsinki' },\r\n { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] },\r\n] // arr containing different data types\r\nconsole.log(arr)\r\n```\r\n\r\n#### Creating an array using split\r\n\r\nAs we have seen in the earlier section, we can split a string at different positions, and we can change to an array. Let us see the examples below.\r\n\r\n```js\r\nlet js = 'JavaScript'\r\nconst charsInJavaScript = js.split('')\r\n\r\nconsole.log(charsInJavaScript) // [\"J\", \"a\", \"v\", \"a\", \"S\", \"c\", \"r\", \"i\", \"p\", \"t\"]\r\n\r\nlet companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon'\r\nconst companies = companiesString.split(',')\r\n\r\nconsole.log(companies) // [\"Facebook\", \" Google\", \" Microsoft\", \" Apple\", \" IBM\", \" Oracle\", \" Amazon\"]\r\nlet txt =\r\n 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'\r\nconst words = txt.split(' ')\r\n\r\nconsole.log(words)\r\n// the text has special characters think how you can just get only the words\r\n// [\"I\", \"love\", \"teaching\", \"and\", \"empowering\", \"people.\", \"I\", \"teach\", \"HTML,\", \"CSS,\", \"JS,\", \"React,\", \"Python\"]\r\n```\r\n\r\n#### Accessing array items using index\r\n\r\nWe access each element in an array using their index. An array index starts from 0. The picture below clearly shows the index of each element in the array.\r\n\r\n![arr index](../images/array_index.png)\r\n\r\n```js\r\nconst fruits = ['banana', 'orange', 'mango', 'lemon']\r\nlet firstFruit = fruits[0] // we are accessing the first item using its index\r\n\r\nconsole.log(firstFruit) // banana\r\n\r\nsecondFruit = fruits[1]\r\nconsole.log(secondFruit) // orange\r\n\r\nlet lastFruit = fruits[3]\r\nconsole.log(lastFruit) // lemon\r\n// Last index can be calculated as follows\r\n\r\nlet lastIndex = fruits.length - 1\r\nlastFruit = fruits[lastIndex]\r\n\r\nconsole.log(lastFruit) // lemon\r\n```\r\n\r\n```js\r\nconst numbers = [0, 3.14, 9.81, 37, 98.6, 100] // set of numbers\r\n\r\nconsole.log(numbers.length) // => to know the size of the array, which is 6\r\nconsole.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100]\r\nconsole.log(numbers[0]) // -> 0\r\nconsole.log(numbers[5]) // -> 100\r\n\r\nlet lastIndex = numbers.length - 1\r\nconsole.log(numbers[lastIndex]) // -> 100\r\n```\r\n\r\n```js\r\nconst webTechs = [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Redux',\r\n 'Node',\r\n 'MongoDB',\r\n] // List of web technologies\r\n\r\nconsole.log(webTechs) // all the array items\r\nconsole.log(webTechs.length) // => to know the size of the array, which is 7\r\nconsole.log(webTechs[0]) // -> HTML\r\nconsole.log(webTechs[6]) // -> MongoDB\r\n\r\nlet lastIndex = webTechs.length - 1\r\nconsole.log(webTechs[lastIndex]) // -> MongoDB\r\n```\r\n\r\n```js\r\nconst countries = [\r\n 'Albania',\r\n 'Bolivia',\r\n 'Canada',\r\n 'Denmark',\r\n 'Ethiopia',\r\n 'Finland',\r\n 'Germany',\r\n 'Hungary',\r\n 'Ireland',\r\n 'Japan',\r\n 'Kenya',\r\n] // List of countries\r\n\r\nconsole.log(countries) // -> all countries in array\r\nconsole.log(countries[0]) // -> Albania\r\nconsole.log(countries[10]) // -> Kenya\r\n\r\nlet lastIndex = countries.length - 1\r\nconsole.log(countries[lastIndex]) // -> Kenya\r\n```\r\n\r\n```js\r\nconst shoppingCart = [\r\n 'Milk',\r\n 'Mango',\r\n 'Tomato',\r\n 'Potato',\r\n 'Avocado',\r\n 'Meat',\r\n 'Eggs',\r\n 'Sugar',\r\n] // List of food products\r\n\r\nconsole.log(shoppingCart) // -> all shoppingCart in array\r\nconsole.log(shoppingCart[0]) // -> Milk\r\nconsole.log(shoppingCart[7]) // -> Sugar\r\n\r\nlet lastIndex = shoppingCart.length - 1\r\nconsole.log(shoppingCart[lastIndex]) // -> Sugar\r\n```\r\n\r\n#### Modifying array element\r\n\r\nAn array is mutable(modifiable). Once an array is created, we can modify the contents of the array elements.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nnumbers[0] = 10 // changing 1 at index 0 to 10\r\nnumbers[1] = 20 // changing 2 at index 1 to 20\r\n\r\nconsole.log(numbers) // [10, 20, 3, 4, 5]\r\n\r\nconst countries = [\r\n 'Albania',\r\n 'Bolivia',\r\n 'Canada',\r\n 'Denmark',\r\n 'Ethiopia',\r\n 'Finland',\r\n 'Germany',\r\n 'Hungary',\r\n 'Ireland',\r\n 'Japan',\r\n 'Kenya',\r\n]\r\n\r\ncountries[0] = 'Afghanistan' // Replacing Albania by Afghanistan\r\nlet lastIndex = countries.length - 1\r\ncountries[lastIndex] = 'Korea' // Replacing Kenya by Korea\r\n\r\nconsole.log(countries)\r\n```\r\n\r\n```sh\r\n[\"Afghanistan\", \"Bolivia\", \"Canada\", \"Denmark\", \"Ethiopia\", \"Finland\", \"Germany\", \"Hungary\", \"Ireland\", \"Japan\", \"Korea\"]\r\n```\r\n\r\n#### Methods to manipulate array\r\n\r\nThere are different methods to manipulate an array. These are some of the available methods to deal with arrays:_Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_\r\n\r\n##### Array Constructor\r\n\r\nArray:To create an array.\r\n\r\n```js\r\nconst arr = Array() // creates an an empty array\r\nconsole.log(arr)\r\n\r\nconst eightEmptyValues = Array(8) // it creates eight empty values\r\nconsole.log(eightEmptyValues) // [empty x 8]\r\n```\r\n\r\n##### Creating static values with fill\r\n\r\nfill: Fill all the array elements with a static value\r\n\r\n```js\r\nconst arr = Array() // creates an an empty array\r\nconsole.log(arr)\r\n\r\nconst eightXvalues = Array(8).fill('X') // it creates eight element values filled with 'X'\r\nconsole.log(eightXvalues) // ['X', 'X','X','X','X','X','X','X']\r\n\r\nconst eight0values = Array(8).fill(0) // it creates eight element values filled with '0'\r\nconsole.log(eight0values) // [0, 0, 0, 0, 0, 0, 0, 0]\r\n\r\nconst four4values = Array(4).fill(4) // it creates 4 element values filled with '4'\r\nconsole.log(four4values) // [4, 4, 4, 4]\r\n```\r\n\r\n##### Concatenating array using concat\r\n\r\nconcat:To concatenate two arrays.\r\n\r\n```js\r\nconst firstList = [1, 2, 3]\r\nconst secondList = [4, 5, 6]\r\nconst thirdList = firstList.concat(secondList)\r\n\r\nconsole.log(thirdList) // [1, 2, 3, 4, 5, 6]\r\n```\r\n\r\n```js\r\nconst fruits = ['banana', 'orange', 'mango', 'lemon'] // array of fruits\r\nconst vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of vegetables\r\nconst fruitsAndVegetables = fruits.concat(vegetables) // concatenate the two arrays\r\n\r\nconsole.log(fruitsAndVegetables)\r\n```\r\n\r\n```sh\r\n[\"banana\", \"orange\", \"mango\", \"lemon\", \"Tomato\", \"Potato\", \"Cabbage\", \"Onion\", \"Carrot\"]\r\n```\r\n\r\n##### Getting array length\r\n\r\nLength:To know the size of the array\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconsole.log(numbers.length) // -> 5 is the size of the array\r\n```\r\n\r\n##### Getting index of an element in an array\r\n\r\nindexOf:To check if an item exist in an array. If it exists it returns the index else it returns -1.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\n\r\nconsole.log(numbers.indexOf(5)) // -> 4\r\nconsole.log(numbers.indexOf(0)) // -> -1\r\nconsole.log(numbers.indexOf(1)) // -> 0\r\nconsole.log(numbers.indexOf(6)) // -> -1\r\n```\r\n\r\nCheck an element if it exist in an array.\r\n\r\n- Check items in a list\r\n\r\n```js\r\n// let us check if a banana exist in the array\r\n\r\nconst fruits = ['banana', 'orange', 'mango', 'lemon']\r\nlet index = fruits.indexOf('banana') // 0\r\n\r\nif (index != -1) {\r\n console.log('This fruit does exist in the array')\r\n} else {\r\n console.log('This fruit does not exist in the array')\r\n}\r\n// This fruit does exist in the array\r\n\r\n// we can use also ternary here\r\nindex != -1\r\n ? console.log('This fruit does exist in the array')\r\n : console.log('This fruit does not exist in the array')\r\n\r\n// let us check if a avocado exist in the array\r\nlet indexOfAvocado = fruits.indexOf('avocado') // -1, if the element not found index is -1\r\nif (indexOfAvocado != -1) {\r\n console.log('This fruit does exist in the array')\r\n} else {\r\n console.log('This fruit does not exist in the array')\r\n}\r\n// This fruit does not exist in the array\r\n```\r\n\r\n##### Getting last index of an element in array\r\n\r\nlastIndexOf: It gives the position of the last item in the array. If it exist, it returns the index else it returns -1.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5, 3, 1, 2]\r\n\r\nconsole.log(numbers.lastIndexOf(2)) // 7\r\nconsole.log(numbers.lastIndexOf(0)) // -1\r\nconsole.log(numbers.lastIndexOf(1)) // 6\r\nconsole.log(numbers.lastIndexOf(4)) // 3\r\nconsole.log(numbers.lastIndexOf(6)) // -1\r\n```\r\n\r\nincludes:To check if an item exist in an array. If it exist it returns the true else it returns false.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\n\r\nconsole.log(numbers.includes(5)) // true\r\nconsole.log(numbers.includes(0)) // false\r\nconsole.log(numbers.includes(1)) // true\r\nconsole.log(numbers.includes(6)) // false\r\n\r\nconst webTechs = [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Redux',\r\n 'Node',\r\n 'MongoDB',\r\n] // List of web technologies\r\n\r\nconsole.log(webTechs.includes('Node')) // true\r\nconsole.log(webTechs.includes('C')) // false\r\n```\r\n\r\n##### Checking array\r\n\r\nArray.isArray:To check if the data type is an array\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconsole.log(Array.isArray(numbers)) // true\r\n\r\nconst number = 100\r\nconsole.log(Array.isArray(number)) // false\r\n```\r\n\r\n##### Converting array to string\r\n\r\ntoString:Converts array to string\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconsole.log(numbers.toString()) // 1,2,3,4,5\r\n\r\nconst names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']\r\nconsole.log(names.toString()) // Asabeneh,Mathias,Elias,Brook\r\n```\r\n\r\n##### Joining array elements\r\n\r\njoin: It is used to join the elements of the array, the argument we passed in the join method will be joined in the array and return as a string. By default, it joins with a comma, but we can pass different string parameter which can be joined between the items.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconsole.log(numbers.join()) // 1,2,3,4,5\r\n\r\nconst names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']\r\n\r\nconsole.log(names.join()) // Asabeneh,Mathias,Elias,Brook\r\nconsole.log(names.join('')) //AsabenehMathiasEliasBrook\r\nconsole.log(names.join(' ')) //Asabeneh Mathias Elias Brook\r\nconsole.log(names.join(', ')) //Asabeneh, Mathias, Elias, Brook\r\nconsole.log(names.join(' # ')) //Asabeneh # Mathias # Elias # Brook\r\n\r\nconst webTechs = [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Redux',\r\n 'Node',\r\n 'MongoDB',\r\n] // List of web technologies\r\n\r\nconsole.log(webTechs.join()) // \"HTML,CSS,JavaScript,React,Redux,Node,MongoDB\"\r\nconsole.log(webTechs.join(' # ')) // \"HTML # CSS # JavaScript # React # Redux # Node # MongoDB\"\r\n```\r\n\r\n##### Slice array elements\r\n\r\nSlice: To cut out a multiple items in range. It takes two parameters:starting and ending position. It doesn't include the ending position.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\n\r\nconsole.log(numbers.slice()) // -> it copies all item\r\nconsole.log(numbers.slice(0)) // -> it copies all item\r\nconsole.log(numbers.slice(0, numbers.length)) // it copies all item\r\nconsole.log(numbers.slice(1, 4)) // -> [2,3,4] // it doesn't include the ending position\r\n```\r\n\r\n##### Splice method in array\r\n\r\nSplice: It takes three parameters:Starting position, number of times to be removed and number of items to be added.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\n\r\nconsole.log(numbers.splice()) // -> remove all items\r\n```\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconsole.log(numbers.splice(0, 1)) // remove the first item\r\n```\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5, 6]\r\nconsole.log(numbers.splice(3, 3, 7, 8, 9)) // -> [1, 2, 3, 7, 8, 9] //it removes three item and replace three items\r\n```\r\n\r\n##### Adding item to an array using push\r\n\r\nPush: adding item in the end. To add item to the end of an existing array we use the push method.\r\n\r\n```js\r\n// syntax\r\nconst arr = ['item1', 'item2', 'item3']\r\narr.push('new item')\r\n\r\nconsole.log(arr)\r\n// ['item1', 'item2','item3','new item']\r\n```\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nnumbers.push(6)\r\n\r\nconsole.log(numbers) // -> [1,2,3,4,5,6]\r\n\r\nnumbers.pop() // -> remove one item from the end\r\nconsole.log(numbers) // -> [1,2,3,4,5]\r\n```\r\n\r\n```js\r\nlet fruits = ['banana', 'orange', 'mango', 'lemon']\r\nfruits.push('apple')\r\n\r\nconsole.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple']\r\n\r\nfruits.push('lime')\r\nconsole.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime']\r\n```\r\n\r\n##### Removing the end element using pop\r\n\r\npop: Removing item in the end.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nnumbers.pop() // -> remove one item from the end\r\n\r\nconsole.log(numbers) // -> [1,2,3,4]\r\n```\r\n\r\n##### Removing an element from the beginning\r\n\r\nshift: Removing one array element in the beginning of the array.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nnumbers.shift() // -> remove one item from the beginning\r\n\r\nconsole.log(numbers) // -> [2,3,4,5]\r\n```\r\n\r\n##### Add an element from the beginning\r\n\r\nunshift: Adding array element in the beginning of the array.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nnumbers.unshift(0) // -> add one item from the beginning\r\n\r\nconsole.log(numbers) // -> [0,1,2,3,4,5]\r\n```\r\n\r\n##### Reversing array order\r\n\r\nreverse: reverse the order of an array.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nnumbers.reverse() // -> reverse array order\r\n\r\nconsole.log(numbers) // [5, 4, 3, 2, 1]\r\n\r\nnumbers.reverse()\r\nconsole.log(numbers) // [1, 2, 3, 4, 5]\r\n```\r\n\r\n##### Sorting elements in array\r\n\r\nsort: arrange array elements in ascending order. Sort takes a call back function, we will see how we use sort with a call back function in the coming sections.\r\n\r\n```js\r\nconst webTechs = [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Redux',\r\n 'Node',\r\n 'MongoDB',\r\n]\r\n\r\nwebTechs.sort()\r\nconsole.log(webTechs) // [\"CSS\", \"HTML\", \"JavaScript\", \"MongoDB\", \"Node\", \"React\", \"Redux\"]\r\n\r\nwebTechs.reverse() // after sorting we can reverse it\r\nconsole.log(webTechs) // [\"Redux\", \"React\", \"Node\", \"MongoDB\", \"JavaScript\", \"HTML\", \"CSS\"]\r\n```\r\n\r\n#### Array of arrays\r\n\r\nArray can store different data types including an array itself. Let us create an array of arrays\r\n\r\n```js\r\nconst firstNums = [1, 2, 3]\r\nconst secondNums = [1, 4, 9]\r\n\r\nconst arrayOfArray = [\r\n [1, 2, 3],\r\n [1, 2, 3],\r\n]\r\nconsole.log(arrayOfArray[0]) // [1, 2, 3]\r\n\r\nconst frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']\r\nconst backEnd = ['Node', 'Express', 'MongoDB']\r\nconst fullStack = [frontEnd, backEnd]\r\nconsole.log(fullStack) // [[\"HTML\", \"CSS\", \"JS\", \"React\", \"Redux\"], [\"Node\", \"Express\", \"MongoDB\"]]\r\nconsole.log(fullStack.length) // 2\r\nconsole.log(fullStack[0]) // [\"HTML\", \"CSS\", \"JS\", \"React\", \"Redux\"]\r\nconsole.log(fullStack[1]) // [\"Node\", \"Express\", \"MongoDB\"]\r\n```\r\n\r\n### 💻 Exercise\r\n\r\n##### Exercise: Level 1\r\n\r\n```js\r\nconst countries = [\r\n 'Albania',\r\n 'Bolivia',\r\n 'Canada',\r\n 'Denmark',\r\n 'Ethiopia',\r\n 'Finland',\r\n 'Germany',\r\n 'Hungary',\r\n 'Ireland',\r\n 'Japan',\r\n 'Kenya',\r\n]\r\n\r\nconst webTechs = [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Redux',\r\n 'Node',\r\n 'MongoDB',\r\n]\r\n```\r\n\r\n1. Declare an _empty_ array;\r\n2. Declare an array with more than 5 number of elements\r\n3. Find the length of your array\r\n4. Get the first item, the middle item and the last item of the array\r\n5. Declare an array called _mixedDataTypes_, put different data types in the array and find the length of the array. The array size should be greater than 5\r\n6. Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon\r\n7. Print the array using _console.log()_\r\n8. Print the number of companies in the array\r\n9. Print the first company, middle and last company\r\n10. Print out each company\r\n11. Change each company name to uppercase one by one and print them out\r\n12. Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies.\r\n13. Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is _not found_\r\n14. Filter out companies which have more than one 'o' without the filter method\r\n15. Sort the array using _sort()_ method\r\n16. Reverse the array using _reverse()_ method\r\n17. Slice out the first 3 companies from the array\r\n18. Slice out the last 3 companies from the array\r\n19. Slice out the middle IT company or companies from the array\r\n20. Remove the first IT company from the array\r\n21. Remove the middle IT company or companies from the array\r\n22. Remove the last IT company from the array\r\n23. Remove all IT companies\r\n\r\n##### Exercise: Level 2\r\n\r\n1. Create a separate countries.js file and store the countries array into this file, create a separate file web_techs.js and store the webTechs array into this file. Access both file in main.js file\r\n1. First remove all the punctuations and change the string to array and count the number of words in the array\r\n\r\n ```js\r\n let text =\r\n 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'\r\n console.log(words)\r\n console.log(words.length)\r\n ```\r\n\r\n ```sh\r\n [\"I\", \"love\", \"teaching\", \"and\", \"empowering\", \"people\", \"I\", \"teach\", \"HTML\", \"CSS\", \"JS\", \"React\", \"Python\"]\r\n\r\n 13\r\n ```\r\n\r\n1. In the following shopping cart add, remove, edit items\r\n\r\n ```js\r\n const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']\r\n ```\r\n\r\n - add 'Meat' in the beginning of your shopping cart if it has not been already added\r\n - add Sugar at the end of you shopping cart if it has not been already added\r\n - remove 'Honey' if you are allergic to honey\r\n - modify Tea to 'Green Tea'\r\n\r\n1. In countries array check if 'Ethiopia' exists in the array if it exists print 'ETHIOPIA'. If it does not exist add to the countries list.\r\n1. In the webTechs array check if Sass exists in the array and if it exists print 'Sass is a CSS preprocess'. If it does not exist add Sass to the array and print the array.\r\n1. Concatenate the following two variables and store it in a fullStack variable.\r\n\r\n ```js\r\n const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']\r\n const backEnd = ['Node', 'Express', 'MongoDB']\r\n\r\n console.log(fullStack)\r\n ```\r\n\r\n ```sh\r\n [\"HTML\", \"CSS\", \"JS\", \"React\", \"Redux\", \"Node\", \"Express\", \"MongoDB\"]\r\n ```\r\n\r\n##### Exercise: Level 3\r\n\r\n1. The following is an array of 10 students ages:\r\n `js const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24] ` - Sort the array and find the min and max age - Find the median age(one middle item or two middle items divided by two) - Find the average age(all items divided by number of items) - Find the range of the ages(max minus min) - Compare the value of (min - average) and (max - average), use _abs()_ method\r\n\r\n 1.Slice the first ten countries from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)\r\n\r\n1. Find the middle country(ies) in the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)\r\n1. Divide the countries array into two equal arrays if it is even. If countries array is not even , one more country for the first half.\r\n\r\n### 4. Conditionals\r\n\r\nConditional statements are used for make decisions based on different conditions.\r\nBy default , statements in JavaScript script executed sequentially from top to bottom. If the processing logic require so, the sequential flow of execution can be altered in two ways:\r\n\r\n- Conditional execution: a block of one or more statements will be executed if a certain expression is true\r\n- Repetitive execution: a block of one or more statements will be repetitively executed as long as a certain expression is true. In this section, we will cover _if_, _else_ , _else if_ statements. The comparison and logical operators we learned in the previous sections will be useful in here.\r\n\r\nConditions can be implementing using the following ways:\r\n\r\n- if\r\n- if else\r\n- if else if else\r\n- switch\r\n- ternary operator\r\n\r\n#### If\r\n\r\nIn JavaScript and other programming languages the key word _if_ is to used check if a condition is true and to execute the block code. To create an if condition, we need _if_ keyword, condition inside a parenthesis and block of code inside a curly bracket({}).\r\n\r\n```js\r\n// syntax\r\nif (condition) {\r\n //this part of code runs for truthy condition\r\n}\r\n```\r\n\r\n**Example:**\r\n\r\n```js\r\nlet num = 3\r\nif (num > 0) {\r\n console.log(`${num} is a positive number`)\r\n}\r\n// 3 is a positive number\r\n```\r\n\r\nAs you can see in the condition example above, 3 is greater than 0, so it is a positive number. The condition was true and the block of code was executed. However, if the condition is false, we won't see any results.\r\n\r\n```js\r\nlet isRaining = true\r\nif (isRaining) {\r\n console.log('Remember to take your rain coat.')\r\n}\r\n```\r\n\r\nThe same goes for the second condition, if isRaining is false the if block will not be executed and we do not see any output. In order to see the result of a falsy condition, we should have another block, which is going to be _else_.\r\n\r\n#### If Else\r\n\r\nIf condition is true the first block will be executed, if not the else condition will be executed.\r\n\r\n```js\r\n// syntax\r\nif (condition) {\r\n // this part of code runs for truthy condition\r\n} else {\r\n // this part of code runs for false condition\r\n}\r\n```\r\n\r\n```js\r\nlet num = 3\r\nif (num > 0) {\r\n console.log(`${num} is a positive number`)\r\n} else {\r\n console.log(`${num} is a negative number`)\r\n}\r\n// 3 is a positive number\r\n\r\nnum = -3\r\nif (num > 0) {\r\n console.log(`${num} is a positive number`)\r\n} else {\r\n console.log(`${num} is a negative number`)\r\n}\r\n// -3 is a negative number\r\n```\r\n\r\n```js\r\nlet isRaining = true\r\nif (isRaining) {\r\n console.log('You need a rain coat.')\r\n} else {\r\n console.log('No need for a rain coat.')\r\n}\r\n// You need a rain coat.\r\n\r\nisRaining = false\r\nif (isRaining) {\r\n console.log('You need a rain coat.')\r\n} else {\r\n console.log('No need for a rain coat.')\r\n}\r\n// No need for a rain coat.\r\n```\r\n\r\nThe last condition is false, therefore the else block was executed. What if we have more than two conditions? In that case, we would use _else if_ conditions.\r\n\r\n#### If Else if Else\r\n\r\nOn our daily life, we make decisions on daily basis. We make decisions not by checking one or two conditions instead we make decisions based on multiple conditions. As similar to our daily life, programming is also full of conditions. We use _else if_ when we have multiple conditions.\r\n\r\n```js\r\n// syntax\r\nif (condition) {\r\n // code\r\n} else if (condition) {\r\n // code\r\n} else {\r\n // code\r\n}\r\n```\r\n\r\n**Example:**\r\n\r\n```js\r\nlet a = 0\r\nif (a > 0) {\r\n console.log(`${a} is a positive number`)\r\n} else if (a < 0) {\r\n console.log(`${a} is a negative number`)\r\n} else if (a == 0) {\r\n console.log(`${a} is zero`)\r\n} else {\r\n console.log(`${a} is not a number`)\r\n}\r\n```\r\n\r\n```js\r\n// if else if else\r\nlet weather = 'sunny'\r\nif (weather === 'rainy') {\r\n console.log('You need a rain coat.')\r\n} else if (weather === 'cloudy') {\r\n console.log('It might be cold, you need a jacket.')\r\n} else if (weather === 'sunny') {\r\n console.log('Go out freely.')\r\n} else {\r\n console.log('No need for rain coat.')\r\n}\r\n```\r\n\r\n#### Switch\r\n\r\nSwitch is an alternative for **if else if else else**.\r\nThe switch statement starts with a _switch_ keyword followed by a parenthesis and code block. Inside the code block we will have different cases. Case block runs if the value in the switch statement parenthesis matches with the case value. The break statement is to terminate execution so the code execution does not go down after the condition is satisfied. The default block runs if all the cases don't satisfy the condition.\r\n\r\n```js\r\nswitch (caseValue) {\r\n case 1:\r\n // code\r\n break\r\n case 2:\r\n // code\r\n break\r\n case 3:\r\n // code\r\n default:\r\n // code\r\n}\r\n```\r\n\r\n```js\r\nlet weather = 'cloudy'\r\nswitch (weather) {\r\n case 'rainy':\r\n console.log('You need a rain coat.')\r\n break\r\n case 'cloudy':\r\n console.log('It might be cold, you need a jacket.')\r\n break\r\n case 'sunny':\r\n console.log('Go out freely.')\r\n break\r\n default:\r\n console.log(' No need for rain coat.')\r\n}\r\n\r\n// Switch More Examples\r\nlet dayUserInput = prompt('What day is today ?')\r\nlet day = dayUserInput.toLowerCase()\r\n\r\nswitch (day) {\r\n case 'monday':\r\n console.log('Today is Monday')\r\n break\r\n case 'tuesday':\r\n console.log('Today is Tuesday')\r\n break\r\n case 'wednesday':\r\n console.log('Today is Wednesday')\r\n break\r\n case 'thursday':\r\n console.log('Today is Thursday')\r\n break\r\n case 'friday':\r\n console.log('Today is Friday')\r\n break\r\n case 'saturday':\r\n console.log('Today is Saturday')\r\n break\r\n case 'sunday':\r\n console.log('Today is Sunday')\r\n break\r\n default:\r\n console.log('It is not a week day.')\r\n}\r\n```\r\n\r\n// Examples to use conditions in the cases\r\n\r\n```js\r\nlet num = prompt('Enter number')\r\nswitch (true) {\r\n case num > 0:\r\n console.log('Number is positive')\r\n break\r\n case num == 0:\r\n console.log('Numbers is zero')\r\n break\r\n case num < 0:\r\n console.log('Number is negative')\r\n break\r\n default:\r\n console.log('Entered value was not a number')\r\n}\r\n```\r\n\r\n#### Ternary Operators\r\n\r\nTernary operator is very common in _React_. It is a short way to write if else statement. In React we use ternary operator in many cases.\r\n\r\nTo generalize, ternary operator is another way to write conditionals.\r\n\r\n```js\r\nlet isRaining = true\r\nisRaining\r\n ? console.log('You need a rain coat.')\r\n : console.log('No need for a rain coat.')\r\n```\r\n\r\n### 💻 Exercises\r\n\r\n##### Exercises: Level 1\r\n\r\n1. Get user input using prompt(“Enter your age:”). If user is 18 or older , give feedback:'You are old enough to drive' but if not 18 give another feedback stating to wait for the number of years he needs to turn 18.\r\n\r\n ```sh\r\n Enter your age: 30\r\n You are old enough to drive.\r\n\r\n Enter your age:15\r\n You are left with 3 years to drive.\r\n ```\r\n\r\n1. Compare the values of myAge and yourAge using if … else. Based on the comparison and log the result to console stating who is older (me or you). Use prompt(“Enter your age:”) to get the age as input.\r\n\r\n ```sh\r\n Enter your age: 30\r\n You are 5 years older than me.\r\n ```\r\n\r\n1. If a is greater than b return 'a is greater than b' else 'a is less than b'. Try to implement it in two ways\r\n\r\n - using if else\r\n - ternary operator.\r\n\r\n ```js\r\n let a = 4\r\n let b = 3\r\n ```\r\n\r\n ```sh\r\n 4 is greater than 3\r\n ```\r\n\r\n1. Even numbers are divisible by 2 and the remainder is zero. How do you check, if a number is even or not using JavaScript?\r\n\r\n ```sh\r\n Enter a number: 2\r\n 2 is an even number\r\n\r\n Enter a number: 9\r\n 9 is is an odd number.\r\n ```\r\n\r\n##### Exercises: Level 2\r\n\r\n1. Write a code which can give grades to students according to theirs scores:\r\n - 80-100, A\r\n - 70-89, B\r\n - 60-69, C\r\n - 50-59, D\r\n - 0-49, F\r\n1. Check if the season is Autumn, Winter, Spring or Summer.\r\n If the user input is :\r\n - September, October or November, the season is Autumn.\r\n - December, January or February, the season is Winter.\r\n - March, April or May, the season is Spring\r\n - June, July or August, the season is Summer\r\n1. Check if a day is weekend day or a working day. Your script will take day as an input.\r\n\r\n```sh\r\n What is the day today? Saturday\r\n Saturday is a weekend.\r\n\r\n What is the day today? saturDaY\r\n Saturday is a weekend.\r\n\r\n What is the day today? Friday\r\n Friday is a working day.\r\n\r\n What is the day today? FrIDAy\r\n Friday is a working day.\r\n```\r\n\r\n##### Exercises: Level 3\r\n\r\n1. Write a program which tells the number of days in a month.\r\n\r\n```sh\r\n Enter a month: January\r\n January has 31 days.\r\n\r\n Enter a month: JANUARY\r\n January has 31 day\r\n\r\n Enter a month: February\r\n February has 28 days.\r\n\r\n Enter a month: FEbruary\r\n February has 28 days.\r\n```\r\n\r\n1. Write a program which tells the number of days in a month, now consider leap year.\r\n\r\n### 5. Loops\r\n\r\nIn programming we use different loops to carry out repetitive tasks. Therefore, loop can help us to automate tedious and repetitive task. JavaScript has also different types of loops which we can use to work on repetitive task.\r\n\r\nImagine if your are asked to print Hello world one thousand times without a loop, it may take an hour or two to do this tedious task. However, using loop we can print it in less than a second.\r\n\r\nLoops:\r\n\r\n- for\r\n- while\r\n- do while\r\n- for of\r\n- forEach\r\n- for in\r\n\r\nA loop usually goes until the condition gets false. But sometimes we like to interrupt the loop or skip an item during iteration. We use _break_ to interrupt the loop and _continue_ to skip an item during iteration.\r\n\r\n#### Types of Loops\r\n\r\n##### 1. for\r\n\r\nWe use for loop when we know how many iteration we go. Let's see the following example\r\n\r\n```js\r\n// for loop syntax\r\n\r\nfor (initialization, condition, increment/decrement) {\r\n code goes here\r\n}\r\n```\r\n\r\nThis code prints from 0 to 5.\r\n\r\n```js\r\nfor (let i = 0; i < 6; i++) {\r\n console.log(i)\r\n}\r\n```\r\n\r\nFor example if we want to sum all the numbers from 0 to 100.\r\n\r\n```js\r\nlet sum = 0\r\nfor (let i = 0; i < 101; i++) {\r\n sum += i\r\n}\r\n\r\nconsole.log(sum)\r\n```\r\n\r\nIf we want to sum only even numbers:\r\n\r\n```js\r\nlet sum = 0\r\nfor (let i = 0; i < 101; i += 2) {\r\n sum += i\r\n}\r\n\r\nconsole.log(sum)\r\n\r\n// or another way\r\n\r\nlet total = 0\r\nfor (let i = 0; i < 101; i++) {\r\n if (i % 2 == 0) {\r\n total += i\r\n }\r\n}\r\nconsole.log(total)\r\n```\r\n\r\nThis code iterates through the array\r\n\r\n```js\r\nconst nums = [1, 2, 3, 4, 5]\r\nfor (let i = 0; i < 6; i++) {\r\n console.log(nums[i])\r\n}\r\n```\r\n\r\nThis code prints 5 to 0. Looping in reverse order\r\n\r\n```js\r\nfor (let i = 5; i >= 0; i--) {\r\n console.log(i)\r\n}\r\n```\r\n\r\nThe Code below can reverse an array.\r\n\r\n```js\r\nconst nums = [1, 2, 3, 4, 5]\r\nconst lastIndex = nums.length - 1\r\nconst newArray = []\r\nfor (let i = lastIndex; i >= 0; i--) {\r\n newArray.push(nums[i])\r\n}\r\n\r\nconsole.log(newArray)\r\n```\r\n\r\n##### 2. while\r\n\r\nWe use the while loop when we do not know how man iteration we go in advance.\r\n\r\n```js\r\nlet count = prompt('Enter a positive number: ')\r\nwhile (count > 0) {\r\n console.log(count)\r\n count--\r\n}\r\n```\r\n\r\n##### 3. do while\r\n\r\nDo while run at least once if the condition is true or false\r\n\r\n```js\r\nlet count = 0\r\ndo {\r\n console.log(count)\r\n count++\r\n} while (count < 11)\r\n```\r\n\r\nThe code below runs ones though the condition is false\r\n\r\n```js\r\nlet count = 11\r\ndo {\r\n console.log(count)\r\n count++\r\n} while (count < 11)\r\n```\r\n\r\nWhile loop is the least important loop in many programming languages.\r\n\r\n##### 4. for of\r\n\r\nThe for of loop is very handy to use it with array. If we are not interested in the index of the array a for of loop is preferable to regular for loop or forEach loop.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nfor (const number of numbers) {\r\n console.log(number)\r\n}\r\n\r\nconst countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']\r\nfor (const country of countries) {\r\n console.log(country.toUpperCase())\r\n}\r\n```\r\n\r\n##### 5. forEach\r\n\r\nIf we are interested in the index of the array forEach is preferable to for of loop. The forEach array method takes a callback function, the callback function takes three arguments: the item, the index and the array itself.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nnumbers.forEach((number, i) => {\r\n console.log(number, i)\r\n})\r\n\r\nconst countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']\r\ncountries.forEach((country, i, arr) => {\r\n console.log(i, country.toUpperCase())\r\n})\r\n```\r\n\r\n##### 6. for in\r\n\r\nThe for in loop can be used with object literals to get the keys of the object.\r\n\r\n```js\r\nconst user = {\r\n firstName: 'Asabeneh',\r\n lastName: 'Yetayeh',\r\n age: 250,\r\n country: 'Finland',\r\n skills: ['HTML', 'CSS', 'JS', 'React', 'Node', 'Python', 'D3.js'],\r\n}\r\n\r\nfor (const key in user) {\r\n console.log(key, user[key])\r\n}\r\n```\r\n\r\n#### Interrupting a loop and skipping an item\r\n\r\n##### break\r\n\r\nBreak is used to interrupt a loop.\r\n\r\n```js\r\nfor (let i = 0; i <= 5; i++) {\r\n if (i == 3) {\r\n break\r\n }\r\n console.log(i)\r\n}\r\n\r\n// 0 1 2\r\n```\r\n\r\nThe above code stops if 3 found in the iteration process.\r\n\r\n##### continue\r\n\r\nWe use the keyword continue to skip a certain iterations.\r\n\r\n```js\r\nfor (let i = 0; i <= 5; i++) {\r\n if (i == 3) {\r\n continue\r\n }\r\n console.log(i)\r\n}\r\n// 0 1 2 4 5\r\n```\r\n\r\n#### Conclusions\r\n\r\n- Regular for loop can be used anywhere when the number of iteration is known.\r\n- While loop when the number of iteration is not know\r\n- Do while loop and while loop are almost the same but do while loop run at least once even when the condition is false\r\n- for of is used only for array\r\n- forEach is used for array\r\n- for in is used for object\r\n\r\n### 6. Scope\r\n\r\nVariable is the fundamental part in programming. We declare variable to store different data types. To declare a variable we use the key word _var_, _let_ and _const_. A variable can declared at different scope. In this section we will see the scope, scope of variables when we use var or let.\r\nVariables scopes can be:\r\n\r\n- Window\r\n- Global\r\n- Local\r\n\r\nVariable can be declared globally or locally or window scope. We will see both global and local scope.\r\nAnything declared without let, var or const is scoped at window level.\r\n\r\nLet us image we have a scope.js file.\r\n\r\n#### Window Scope\r\n\r\nWithout using console.log() open your browser and check, you will see the value of a and b if you write a or b on the browser. That means a and b are already available in the window.\r\n\r\n```js\r\n//scope.js\r\na = 'JavaScript' // is a window scope this found anywhere\r\nb = 10 // this is a window scope variable\r\nfunction letsLearnScope() {\r\n console.log(a, b)\r\n if (true) {\r\n console.log(a, b)\r\n }\r\n}\r\nconsole.log(a, b) // accessible\r\n```\r\n\r\n#### Global scope\r\n\r\nA globally declared variable can be accessed every where in the same file. But the term global is relative. It can be global to the file or it can be global relative to some block of codes.\r\n\r\n```js\r\n//scope.js\r\nlet a = 'JavaScript' // is a global scope it will be found anywhere in this file\r\nlet b = 10 // is a global scope it will be found anywhere in this file\r\nfunction letsLearnScope() {\r\n console.log(a, b) // JavaScript 10, accessible\r\n if (true) {\r\n let a = 'Python'\r\n let b = 100\r\n console.log(a, b) // Python 100\r\n }\r\n console.log(a, b)\r\n}\r\nletsLearnScope()\r\nconsole.log(a, b) // JavaScript 10, accessible\r\n```\r\n\r\n#### Local scope\r\n\r\nA variable declared as local can be accessed only in certain block code.\r\n\r\n```js\r\n//scope.js\r\nlet a = 'JavaScript' // is a global scope it will be found anywhere in this file\r\nlet b = 10 // is a global scope it will be found anywhere in this file\r\nfunction letsLearnScope() {\r\n console.log(a, b) // JavaScript 10, accessible\r\n let c = 30\r\n if (true) {\r\n // we can access from the function and outside the function but\r\n // variables declared inside the if will not be accessed outside the if block\r\n let a = 'Python'\r\n let b = 20\r\n let d = 40\r\n console.log(a, b, c) // Python 20 30\r\n }\r\n // we can not access c because c's scope is only the if block\r\n console.log(a, b) // JavaScript 10\r\n}\r\nletsLearnScope()\r\nconsole.log(a, b) // JavaScript 10, accessible\r\n```\r\n\r\nNow, you have an understanding of scope. A variable declared with _var_ only scoped to function but variable declared with _let_ or _const_ is block scope(function block, if block, loop etc). Block in JavaScript is a code in between two curly brackets ({}).\r\n\r\n```js\r\n//scope.js\r\nfunction letsLearnScope() {\r\n var gravity = 9.81\r\n console.log(gravity)\r\n}\r\n// console.log(gravity), Uncaught ReferenceError: gravity is not defined\r\n\r\nif (true) {\r\n var gravity = 9.81\r\n console.log(gravity) // 9.81\r\n}\r\nconsole.log(gravity) // 9.81\r\n\r\nfor (var i = 0; i < 3; i++) {\r\n console.log(i) // 1, 2, 3\r\n}\r\nconsole.log(i)\r\n```\r\n\r\nIn ES6 and above there is _let_ and _const_, so you will not suffer from the sneakiness of _var_. When we use _let_ our variable is block scoped and it will not infect other parts of our code.\r\n\r\n```js\r\n//scope.js\r\nfunction letsLearnScope() {\r\n // you can use let or const, but gravity is constant I prefer to use const\r\n const gravity = 9.81\r\n console.log(gravity)\r\n}\r\n// console.log(gravity), Uncaught ReferenceError: gravity is not defined\r\n\r\nif (true) {\r\n const gravity = 9.81\r\n console.log(gravity) // 9.81\r\n}\r\n// console.log(gravity), Uncaught ReferenceError: gravity is not defined\r\n\r\nfor (let i = 0; i < 3; i++) {\r\n console.log(i) // 1, 2, 3\r\n}\r\n// console.log(i), Uncaught ReferenceError: gravity is not defined\r\n```\r\n\r\nThe scope _let_ and _const_ is the same. The difference is only reassigning. We can not change or reassign the value of const variable. I would strongly suggest you to use _let_ and _const_, by using _let_ and _const_ you will writ clean code and avoid hard to debug mistakes. As a rule of thumb, you can use _let_ for any value which change, _const_ for any constant value, and for array, object, arrow function and function expression.\r\n\r\n### 7. Object\r\n\r\nEverything can be an object and objects do have properties and properties have values, so an object is a key value pair. The order of the key is not reserved, or there is no order.\r\nTo create an object literal, we use two curly brackets.\r\n\r\n#### Creating an empty object\r\n\r\nAn empty object\r\n\r\n```js\r\nconst person = {}\r\n```\r\n\r\n#### Creating an objecting with values\r\n\r\nNow, the person object has firstName, lastName, age, location, skills and isMarried properties. The value of properties or keys could be a string, number, boolean, an object, null, undefined or a function.\r\n\r\nLet us see some examples of object. Each key has a value in the object.\r\n\r\n```js\r\nconst rectangle = {\r\n length: 20,\r\n width: 20,\r\n}\r\nconsole.log(rectangle) // {length: 20, width: 20}\r\n\r\nconst person = {\r\n firstName: 'Asabeneh',\r\n lastName: 'Yetayeh',\r\n age: 250,\r\n country: 'Finland',\r\n city: 'Helsinki',\r\n skills: [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Node',\r\n 'MongoDB',\r\n 'Python',\r\n 'D3.js',\r\n ],\r\n isMarried: true,\r\n}\r\nconsole.log(person)\r\n```\r\n\r\n#### Getting values from an object\r\n\r\nWe can access values of object using two methods:\r\n\r\n- using . followed by key name if the key-name is a one word\r\n- using square bracket and a quote\r\n\r\n```js\r\nconst person = {\r\n firstName: 'Asabeneh',\r\n lastName: 'Yetayeh',\r\n age: 250,\r\n country: 'Finland',\r\n city: 'Helsinki',\r\n skills: [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Node',\r\n 'MongoDB',\r\n 'Python',\r\n 'D3.js',\r\n ],\r\n getFullName: function () {\r\n return `${this.firstName}${this.lastName}`\r\n },\r\n 'phone number': '+3584545454545',\r\n}\r\n\r\n// accessing values using .\r\nconsole.log(person.firstName)\r\nconsole.log(person.lastName)\r\nconsole.log(person.age)\r\nconsole.log(person.location)\r\n\r\n// value can be accessed using square bracket and key name\r\nconsole.log(person['firstName'])\r\nconsole.log(person['lastName'])\r\nconsole.log(person['age'])\r\nconsole.log(person['age'])\r\nconsole.log(person['location'])\r\n\r\n// for instance to access the phone number we only use the square bracket method\r\nconsole.log(person['phone number'])\r\n```\r\n\r\n#### Creating object methods\r\n\r\nNow, the person object has getFullName properties. The getFullName is function inside the person object and we call it an object method. The _this_ key word refers to the object itself. We can use the word _this_ to access the values of different properties of the object. We can not use an arrow function as object method because the word this refers to the window inside an arrow function instead of the object itself. Example of object:\r\n\r\n```js\r\nconst person = {\r\n firstName: 'Asabeneh',\r\n lastName: 'Yetayeh',\r\n age: 250,\r\n country: 'Finland',\r\n city: 'Helsinki',\r\n skills: [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Node',\r\n 'MongoDB',\r\n 'Python',\r\n 'D3.js',\r\n ],\r\n getFullName: function () {\r\n return `${this.firstName} ${this.lastName}`\r\n },\r\n}\r\n\r\nconsole.log(person.getFullName())\r\n// Asabeneh Yetayeh\r\n```\r\n\r\n#### Setting new key for an object\r\n\r\nAn object is a mutable data structure and we can modify the content of an object after it gets created.\r\n\r\nSetting a new keys in an object\r\n\r\n```js\r\nconst person = {\r\n firstName: 'Asabeneh',\r\n lastName: 'Yetayeh',\r\n age: 250,\r\n country: 'Finland',\r\n city: 'Helsinki',\r\n skills: [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Node',\r\n 'MongoDB',\r\n 'Python',\r\n 'D3.js',\r\n ],\r\n getFullName: function () {\r\n return `${this.firstName} ${this.lastName}`\r\n },\r\n}\r\nperson.nationality = 'Ethiopian'\r\nperson.country = 'Finland'\r\nperson.title = 'teacher'\r\nperson.skills.push('Meteor')\r\nperson.skills.push('SasS')\r\nperson.isMarried = true\r\n\r\nperson.getPersonInfo = function () {\r\n let skillsWithoutLastSkill = this.skills\r\n .slice(0, this.skills.length - 1)\r\n .join(', ')\r\n let lastSkill = this.skills.slice(this.skills.length - 1)[0]\r\n\r\n let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`\r\n let fullName = this.getFullName()\r\n let statement = `${fullName} is a ${this.title}.\\nHe lives in ${this.country}.\\nHe teaches ${skills}.`\r\n return statement\r\n}\r\nconsole.log(person)\r\nconsole.log(person.getPersonInfo())\r\n```\r\n\r\n```sh\r\nAsabeneh Yetayeh is a teacher.\r\nHe lives in Finland.\r\nHe teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS.\r\n```\r\n\r\n#### Object Methods\r\n\r\nThere are different methods to manipulate an object. Let us see some of the available methods.\r\n\r\n_Object.assign_: To copy an object without modifying the original object\r\n\r\n```js\r\nconst person = {\r\n firstName: 'Asabeneh',\r\n age: 250,\r\n country: 'Finland',\r\n city: 'Helsinki',\r\n skills: ['HTML', 'CSS', 'JS'],\r\n title: 'teacher',\r\n address: {\r\n street: 'Heitamienkatu 16',\r\n pobox: 2002,\r\n city: 'Helsinki',\r\n },\r\n getPersonInfo: function () {\r\n return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.`\r\n },\r\n}\r\n\r\n//Object methods: Object.assign, Object.keys, Object.values, Object.entries\r\n//hasOwnProperty\r\n\r\nconst copyPerson = Object.assign({}, person)\r\nconsole.log(copyPerson)\r\n```\r\n\r\n##### Getting object keys using Object.keys()\r\n\r\n_Object.keys_: To get the keys or properties of an object as an array\r\n\r\n```js\r\nconst keys = Object.keys(copyPerson)\r\nconsole.log(keys) //['name', 'age', 'country', 'skills', 'address', 'getPersonInfo']\r\nconst address = Object.keys(copyPerson.address)\r\nconsole.log(address) //['street', 'pobox', 'city']\r\n```\r\n\r\n##### Getting object values using Object.values()\r\n\r\n_Object.values_:To get values of an object as an array\r\n\r\n```js\r\nconst values = Object.values(copyPerson)\r\nconsole.log(values)\r\n```\r\n\r\n##### Getting object keys and values using Object.entries()\r\n\r\n_Object.entries_:To get the keys and values in an array\r\n\r\n```js\r\nconst entries = Object.entries(copyPerson)\r\nconsole.log(entries)\r\n```\r\n\r\n##### Checking properties using hasOwnProperty()\r\n\r\n_hasOwnProperty_: To check if a specific key or property exist in an object\r\n\r\n```js\r\nconsole.log(copyPerson.hasOwnProperty('name'))\r\nconsole.log(copyPerson.hasOwnProperty('score'))\r\n```\r\n\r\n🌕 You are astonishing. Now, you are super charged with the power of objects. You have just completed day 8 challenges and you are 8 steps a head into your way to greatness. Now do some exercises for your brain and for your muscle.\r\n\r\n### 💻 Exercises\r\n\r\n##### Exercises: Level 1\r\n\r\n1. Create an empty object called dog\r\n1. Print the the dog object on the console\r\n1. Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return _woof woof_\r\n1. Get name, legs, color, age and bark value from the dog object\r\n1. Set new properties the dog object: breed, getDogInfo\r\n\r\n##### Exercises: Level 2\r\n\r\n1. Find the person who has many skills in the users object.\r\n1. Count logged in users,count users having greater than equal to 50 points from the following object.\r\n\r\n ````js\r\n const users = {\r\n Alex: {\r\n email: 'alex@alex.com',\r\n skills: ['HTML', 'CSS', 'JavaScript'],\r\n age: 20,\r\n isLoggedIn: false,\r\n points: 30\r\n },\r\n Asab: {\r\n email: 'asab@asab.com',\r\n skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],\r\n age: 25,\r\n isLoggedIn: false,\r\n points: 50\r\n },\r\n Brook: {\r\n email: 'daniel@daniel.com',\r\n skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],\r\n age: 30,\r\n isLoggedIn: true,\r\n points: 50\r\n },\r\n Daniel: {\r\n email: 'daniel@alex.com',\r\n skills: ['HTML', 'CSS', 'JavaScript', 'Python'],\r\n age: 20,\r\n isLoggedIn: false,\r\n points: 40\r\n },\r\n John: {\r\n email: 'john@john.com',\r\n skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],\r\n age: 20,\r\n isLoggedIn: true,\r\n points: 50\r\n },\r\n Thomas: {\r\n email: 'thomas@thomas.com',\r\n skills: ['HTML', 'CSS', 'JavaScript', 'React'],\r\n age: 20,\r\n isLoggedIn: false,\r\n points: 40\r\n },\r\n Paul: {\r\n email: 'paul@paul.com',\r\n skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],\r\n age: 20,\r\n isLoggedIn: false,\r\n points: 40\r\n }\r\n }```\r\n\r\n ````\r\n\r\n1. Find people who are MERN stack developer from the users object\r\n1. Set your name in the users object without modifying the original users object\r\n1. Get all keys or properties of users object\r\n1. Get all the values of users object\r\n1. Use the countries object to print a country name, capital, populations and languages.\r\n\r\n##### Exercises: Level 3\r\n\r\n1. Create an object literal called _personAccount_. It has _firstName, lastName, incomes, expenses_ properties and it has _totalIncome, totalExpense, accountInfo,addIncome, addExpense_ and _accountBalance_ methods. Incomes is a set of incomes and its description and expenses is a set of incomes and its description.\r\n2. \\*\\*\\*\\* Questions:2, 3 and 4 are based on the following two arrays:users and products ()\r\n\r\n```js\r\nconst users = [\r\n {\r\n _id: 'ab12ex',\r\n username: 'Alex',\r\n email: 'alex@alex.com',\r\n password: '123123',\r\n createdAt: '08/01/2020 9:00 AM',\r\n isLoggedIn: false,\r\n },\r\n {\r\n _id: 'fg12cy',\r\n username: 'Asab',\r\n email: 'asab@asab.com',\r\n password: '123456',\r\n createdAt: '08/01/2020 9:30 AM',\r\n isLoggedIn: true,\r\n },\r\n {\r\n _id: 'zwf8md',\r\n username: 'Brook',\r\n email: 'brook@brook.com',\r\n password: '123111',\r\n createdAt: '08/01/2020 9:45 AM',\r\n isLoggedIn: true,\r\n },\r\n {\r\n _id: 'eefamr',\r\n username: 'Martha',\r\n email: 'martha@martha.com',\r\n password: '123222',\r\n createdAt: '08/01/2020 9:50 AM',\r\n isLoggedIn: false,\r\n },\r\n {\r\n _id: 'ghderc',\r\n username: 'Thomas',\r\n email: 'thomas@thomas.com',\r\n password: '123333',\r\n createdAt: '08/01/2020 10:00 AM',\r\n isLoggedIn: false,\r\n },\r\n]\r\n\r\nconst products = [\r\n {\r\n _id: 'eedfcf',\r\n name: 'mobile phone',\r\n description: 'Huawei Honor',\r\n price: 200,\r\n ratings: [\r\n { userId: 'fg12cy', rate: 5 },\r\n { userId: 'zwf8md', rate: 4.5 },\r\n ],\r\n likes: [],\r\n },\r\n {\r\n _id: 'aegfal',\r\n name: 'Laptop',\r\n description: 'MacPro: System Darwin',\r\n price: 2500,\r\n ratings: [],\r\n likes: ['fg12cy'],\r\n },\r\n {\r\n _id: 'hedfcg',\r\n name: 'TV',\r\n description: 'Smart TV:Procaster',\r\n price: 400,\r\n ratings: [{ userId: 'fg12cy', rate: 5 }],\r\n likes: ['fg12cy'],\r\n },\r\n]\r\n```\r\n\r\nImagine you are getting the above users collection from a MongoDB database.\r\na. Create a function called signUp which allows user to add to the collection. If user exists, inform the user that he has already an account. \r\n b. Create a function called signIn which allows user to sign in to the application\r\n\r\n3. The products array has three elements and each of them has six properties.\r\n a. Create a function called rateProduct which rates the product\r\n b. Create a function called averageRating which calculate the average rating of a product\r\n\r\n4. Create a function called likeProduct. This function will helps to like to the product if it is not liked and remove like if it was liked.\r\n\r\n### 8. Functions\r\n\r\nSo far we have seen many builtin JavaScript functions. In this section, we will focus on custom functions. What is a function? Before we start making functions, lets understand what function is and why we need function?\r\n\r\nA function is a reusable block of code or programming statements designed to perform a certain task.\r\nA function is declared by a function key word followed by a name, followed by parentheses (). A parentheses can take a parameter. If a function take a parameter it will be called with argument. A function can also take a default parameter. To store a data to a function, a function has to return certain data types. To get the value we call or invoke a function.\r\nFunction makes code:\r\n\r\n- clean and easy to read\r\n- reusable\r\n- easy to test\r\n\r\nA function can be declared or created in couple of ways:\r\n\r\n- _Declaration function_\r\n- _Expression function_\r\n- _Anonymous function_\r\n- _Arrow function_\r\n\r\n#### Function Declaration\r\n\r\nLet us see how to declare a function and how to call a function.\r\n\r\n```js\r\n//declaring a function without a parameter\r\nfunction functionName() {\r\n // code goes here\r\n}\r\nfunctionName() // calling function by its name and with parentheses\r\n```\r\n\r\n#### Function without a parameter and return\r\n\r\nFunction can be declared without a parameter.\r\n\r\n**Example:**\r\n\r\n```js\r\n// function without parameter, a function which make a number square\r\nfunction square() {\r\n let num = 2\r\n let sq = num * num\r\n console.log(sq)\r\n}\r\n\r\nsquare() // 4\r\n\r\n// function without parameter\r\nfunction addTwoNumbers() {\r\n let numOne = 10\r\n let numTwo = 20\r\n let sum = numOne + numTwo\r\n\r\n console.log(sum)\r\n}\r\n\r\naddTwoNumbers() // a function has to be called by its name to be executed\r\n```\r\n\r\n```js\r\nfunction printFullName() {\r\n let firstName = 'Asabeneh'\r\n let lastName = 'Yetayeh'\r\n let space = ' '\r\n let fullName = firstName + space + lastName\r\n console.log(fullName)\r\n}\r\n\r\nprintFullName() // calling a function\r\n```\r\n\r\n#### Function returning value\r\n\r\nFunction can also return values, if a function does not return values the value of the function is undefined. Let us write the above functions with return. From now on, we return value to a function instead of printing it.\r\n\r\n```js\r\nfunction printFullName() {\r\n let firstName = 'Asabeneh'\r\n let lastName = 'Yetayeh'\r\n let space = ' '\r\n let fullName = firstName + space + lastName\r\n return fullName\r\n}\r\nconsole.log(printFullName())\r\n```\r\n\r\n```js\r\nfunction addTwoNumbers() {\r\n let numOne = 2\r\n let numTwo = 3\r\n let total = numOne + numTwo\r\n return total\r\n}\r\n\r\nconsole.log(addTwoNumbers())\r\n```\r\n\r\n#### Function with a parameter\r\n\r\nIn a function we can pass different data types(number, string, boolean, object, function) as a parameter.\r\n\r\n```js\r\n// function with one parameter\r\nfunction functionName(parm1) {\r\n //code goes her\r\n}\r\nfunctionName(parm1) // during calling or invoking one argument needed\r\n\r\nfunction areaOfCircle(r) {\r\n let area = Math.PI * r * r\r\n return area\r\n}\r\n\r\nconsole.log(areaOfCircle(10)) // should be called with one argument\r\n\r\nfunction square(number) {\r\n return number * number\r\n}\r\n\r\nconsole.log(square(10))\r\n```\r\n\r\n#### Function with two parameters\r\n\r\n```js\r\n// function with two parameters\r\nfunction functionName(parm1, parm2) {\r\n //code goes her\r\n}\r\nfunctionName(parm1, parm2) // during calling or invoking two arguments needed\r\n// Function without parameter doesn't take input, so lets make a function with parameters\r\nfunction sumTwoNumbers(numOne, numTwo) {\r\n let sum = numOne + numTwo\r\n console.log(sum)\r\n}\r\nsumTwoNumbers(10, 20) // calling functions\r\n// If a function doesn't return it doesn't store data, so it should return\r\n\r\nfunction sumTwoNumbers(numOne, numTwo) {\r\n let sum = numOne + numTwo\r\n return sum\r\n}\r\n\r\nconsole.log(sumTwoNumbers(10, 20))\r\nfunction printFullName(firstName, lastName) {\r\n return `${firstName} ${lastName}`\r\n}\r\nconsole.log(printFullName('Asabeneh', 'Yetayeh'))\r\n```\r\n\r\n#### Function with many parameters\r\n\r\n```js\r\n// function with multiple parameters\r\nfunction functionName(parm1, parm2, parm3,...){\r\n //code goes here\r\n}\r\nfunctionName(parm1,parm2,parm3,...) // during calling or invoking three arguments needed\r\n\r\n\r\n// this function takes array as a parameter and sum up the numbers in the array\r\nfunction sumArrayValues(arr) {\r\n let sum = 0;\r\n for (let i = 0; i < arr.length; i++) {\r\n sum = sum + arr[i];\r\n }\r\n return sum;\r\n}\r\nconst numbers = [1, 2, 3, 4, 5];\r\n //calling a function\r\nconsole.log(sumArrayValues(numbers));\r\n\r\n\r\n const areaOfCircle = (radius) => {\r\n let area = Math.PI * radius * radius;\r\n return area;\r\n }\r\nconsole.log(areaOfCircle(10))\r\n\r\n```\r\n\r\n#### Function with unlimited number of parameters\r\n\r\nSometimes we do not know how many arguments the user going to pass. Therefore, we should know how to write a function which can take unlimited number of arguments. The way we do it has a significant difference between a function declaration(regular function) and arrow function. Let us see examples both in function declaration and arrow function.\r\n\r\n##### Unlimited number of parameters in regular function\r\n\r\nA function declaration provides a function scoped arguments array like object. Any thing we passed as argument in the function can be accessed from arguments object inside the functions. Let us see an example\r\n\r\n```js\r\n// Let us access the arguments object\r\n​\r\nfunction sumAllNums() {\r\n console.log(arguments)\r\n}\r\n\r\nsumAllNums(1, 2, 3, 4))\r\n// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]\r\n\r\n```\r\n\r\n```js\r\n// function declaration\r\n​\r\nfunction sumAllNums() {\r\n let sum = 0\r\n for (let i = 0; i < arguments.length; i++) {\r\n sum += arguments[i]\r\n }\r\n return sum\r\n}\r\n\r\nconsole.log(sumAllNums(1, 2, 3, 4)) // 10\r\nconsole.log(sumAllNums(10, 20, 13, 40, 10)) // 93\r\nconsole.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173\r\n```\r\n\r\n##### Unlimited number of parameters in arrow function\r\n\r\nArrow function does not have the function scoped arguments object. To implement a function which takes unlimited number of arguments in an arrow function we use spread operator followed by any parameter name. Any thing we passed as argument in the function can be accessed as array in the arrow function. Let us see an example\r\n\r\n```js\r\n// Let us access the arguments object\r\n​\r\nconst sumAllNums = (...args) => {\r\n // console.log(arguments), arguments object not found in arrow function\r\n // instead we use an a parameter followed by spread operator\r\n console.log(args)\r\n}\r\n\r\nsumAllNums(1, 2, 3, 4))\r\n// [1, 2, 3, 4]\r\n\r\n```\r\n\r\n```js\r\n// function declaration\r\n​\r\nconst sumAllNums = (...args) => {\r\n let sum = 0\r\n for (const element of args) {\r\n sum += element\r\n }\r\n return sum\r\n}\r\n\r\nconsole.log(sumAllNums(1, 2, 3, 4)) // 10\r\nconsole.log(sumAllNums(10, 20, 13, 40, 10)) // 93\r\nconsole.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173\r\n```\r\n\r\n#### Anonymous Function\r\n\r\nAnonymous function or without name\r\n\r\n```js\r\nconst anonymousFun = function () {\r\n console.log(\r\n 'I am an anonymous function and my value is stored in anonymousFun'\r\n )\r\n}\r\n```\r\n\r\n#### Expression Function\r\n\r\nExpression functions are anonymous functions. After we create a function without a name and we assign it to a variable. To return a value from the function we should call the variable. Look at the example below.\r\n\r\n```js\r\n// Function expression\r\nconst square = function (n) {\r\n return n * n\r\n}\r\n\r\nconsole.log(square(2)) // -> 4\r\n```\r\n\r\n#### Self Invoking Functions\r\n\r\nSelf invoking functions are anonymous functions which do not need to be called to return a value.\r\n\r\n```js\r\n;(function (n) {\r\n console.log(n * n)\r\n})(2) // 4, but instead of just printing if we want to return and store the data, we do as shown below\r\n\r\nlet squaredNum = (function (n) {\r\n return n * n\r\n})(10)\r\n\r\nconsole.log(squaredNum)\r\n```\r\n\r\n#### Arrow Function\r\n\r\nArrow function is an alternative to write a function, however function declaration and arrow function have some minor differences.\r\n\r\nArrow function uses arrow instead of the keyword _function_ to declare a function. Let us see both function declaration and arrow function.\r\n\r\n```js\r\n// This is how we write normal or declaration function\r\n// Let us change this declaration function to an arrow function\r\nfunction square(n) {\r\n return n * n\r\n}\r\n\r\nconsole.log(square(2)) // 4\r\n\r\nconst square = (n) => {\r\n return n * n\r\n}\r\n\r\nconsole.log(square(2)) // -> 4\r\n\r\n// if we have only one line in the code block, it can be written as follows, explicit return\r\nconst square = (n) => n * n // -> 4\r\n```\r\n\r\n```js\r\nconst changeToUpperCase = (arr) => {\r\n const newArr = []\r\n for (const element of arr) {\r\n newArr.push(element.toUpperCase())\r\n }\r\n return newArr\r\n}\r\n\r\nconst countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']\r\nconsole.log(changeToUpperCase(countries))\r\n\r\n// [\"FINLAND\", \"SWEDEN\", \"NORWAY\", \"DENMARK\", \"ICELAND\"]\r\n```\r\n\r\n```js\r\nconst printFullName = (firstName, lastName) => {\r\n return `${firstName} ${lastName}`\r\n}\r\n\r\nconsole.log(printFullName('Asabeneh', 'Yetayeh'))\r\n```\r\n\r\nThe above function has only the return statement, therefore, we can explicitly return it as follows.\r\n\r\n```js\r\nconst printFullName = (firstName, lastName) => `${firstName} ${lastName}`\r\n\r\nconsole.log(printFullName('Asabeneh', 'Yetayeh'))\r\n```\r\n\r\n#### Function with default parameters\r\n\r\nSometimes we pass default values to parameters, when we invoke the function if we do not pass an argument the default value will be used. Both function declaration and arrow function can have a default value or values.\r\n\r\n```js\r\n// syntax\r\n// Declaring a function\r\nfunction functionName(param = value) {\r\n //codes\r\n}\r\n\r\n// Calling function\r\nfunctionName()\r\nfunctionName(arg)\r\n```\r\n\r\n**Example:**\r\n\r\n```js\r\nfunction greetings(name = 'Peter') {\r\n let message = `${name}, welcome to 30 Days Of JavaScript!`\r\n return message\r\n}\r\n\r\nconsole.log(greetings())\r\nconsole.log(greetings('Asabeneh'))\r\n```\r\n\r\n```js\r\nfunction generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') {\r\n let space = ' '\r\n let fullName = firstName + space + lastName\r\n return fullName\r\n}\r\n\r\nconsole.log(generateFullName())\r\nconsole.log(generateFullName('David', 'Smith'))\r\n```\r\n\r\n```js\r\nfunction calculateAge(birthYear, currentYear = 2019) {\r\n let age = currentYear - birthYear\r\n return age\r\n}\r\n\r\nconsole.log('Age: ', calculateAge(1819))\r\n```\r\n\r\n```js\r\nfunction weightOfObject(mass, gravity = 9.81) {\r\n let weight = mass * gravity + ' N' // the value has to be changed to string first\r\n return weight\r\n}\r\n\r\nconsole.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravity at the surface of Earth\r\nconsole.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravity at surface of Moon\r\n```\r\n\r\nLet us see how we write the above functions with arrow functions\r\n\r\n```js\r\n// syntax\r\n// Declaring a function\r\nconst functionName = (param = value) => {\r\n //codes\r\n}\r\n\r\n// Calling function\r\nfunctionName()\r\nfunctionName(arg)\r\n```\r\n\r\n**Example:**\r\n\r\n```js\r\nconst greetings = (name = 'Peter') => {\r\n let message = name + ', welcome to 30 Days Of JavaScript!'\r\n return message\r\n}\r\n\r\nconsole.log(greetings())\r\nconsole.log(greetings('Asabeneh'))\r\n```\r\n\r\n```js\r\nconst generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => {\r\n let space = ' '\r\n let fullName = firstName + space + lastName\r\n return fullName\r\n}\r\n\r\nconsole.log(generateFullName())\r\nconsole.log(generateFullName('David', 'Smith'))\r\n```\r\n\r\n```js\r\nconst calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear\r\nconsole.log('Age: ', calculateAge(1819))\r\n```\r\n\r\n```js\r\nconst weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N'\r\n\r\nconsole.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravity at the surface of Earth\r\nconsole.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravity at surface of Moon\r\n```\r\n\r\n#### Function declaration versus Arrow function\r\n\r\nIt ill be covered in other time\r\n\r\n### 💻 Exercises\r\n\r\n##### Exercises: Level 1\r\n\r\n1. Declare a function _fullName_ and it takes firstName, lastName as a parameter and it returns your full - name.\r\n2. Declare a function _addNumbers_ and it takes two two parameters and it returns sum.\r\n3. Area of a circle is calculated as follows: _area = π x r x r_. Write a function which calculates \\_areaOfCircle\r\n4. Temperature in oC can be converted to oF using this formula: _oF = (oC x 9/5) + 32_. Write a function which convert oC to oF _convertCelciusToFahrenheit_.\r\n5. Body mass index(BMI) is calculated as follows: _bmi = weight in Kg / (height x height) in m2_. Write a function which calculates _bmi_. BMI is used to broadly define different weight groups in adults 20 years old or older.Check if a person is _underweight, normal, overweight_ or _obese_ based the information given below.\r\n\r\n - The same groups apply to both men and women.\r\n - _Underweight_: BMI is less than 18.5\r\n - _Normal weight_: BMI is 18.5 to 24.9\r\n - _Overweight_: BMI is 25 to 29.9\r\n - _Obese_: BMI is 30 or more\r\n\r\n6. Write a function called _checkSeason_, it takes a month parameter and returns the season:Autumn, Winter, Spring or Summer.\r\n\r\n##### Exercises: Level 2\r\n\r\n1. Quadratic equation is calculated as follows: _ax2 + bx + c = 0_. Write a function which calculates value or values of a quadratic equation, _solveQuadEquation_.\r\n\r\n ```js\r\n console.log(solveQuadratic()) // {0}\r\n console.log(solveQuadratic(1, 4, 4)) // {-2}\r\n console.log(solveQuadratic(1, -1, -2)) // {2, -1}\r\n console.log(solveQuadratic(1, 7, 12)) // {-3, -4}\r\n console.log(solveQuadratic(1, 0, -4)) //{2, -2}\r\n console.log(solveQuadratic(1, -1, 0)) //{1, 0}\r\n ```\r\n\r\n2. Declare a function name _printArray_. It takes array as a parameter and it prints out each value of the array.\r\n3. Write a function name _showDateTime_ which shows time in this format: 08/01/2020 04:08 using the Date object.\r\n\r\n ```sh\r\n showDateTime()\r\n 08/01/2020 04:08\r\n ```\r\n\r\n4. Declare a function name _swapValues_. This function swaps value of x to y.\r\n\r\n ```js\r\n swapValues(3, 4) // x => 4, y=>3\r\n swapValues(4, 5) // x = 5, y = 4\r\n ```\r\n\r\n5. Declare a function name _reverseArray_. It takes array as a parameter and it returns the reverse of the array (don't use method).\r\n\r\n ```js\r\n console.log(reverseArray([1, 2, 3, 4, 5]))\r\n //[5, 4, 3, 2, 1]\r\n console.log(reverseArray(['A', 'B', 'C']))\r\n //['C', 'B', 'A']\r\n ```\r\n\r\n6. Declare a function name _capitalizeArray_. It takes array as a parameter and it returns the - capitalizedarray.\r\n7. Declare a function name _addItem_. It takes an item parameter and it returns an array after adding the item\r\n8. Declare a function name _removeItem_. It takes an index parameter and it returns an array after removing an ite\r\n9. Declare a function name evensAndOdds . It takes a positive integer as parameter and it counts number of evens and odds in the number.\r\n\r\n```sh\r\nevensAndOdds(100);\r\nThe number of odds are 50.\r\nThe number of evens are 51.\r\n```\r\n\r\n13. Write a function which takes any number of arguments and return the sum of the arguments\r\n\r\n```js\r\nsum(1, 2, 3) // -> 6\r\nsum(1, 2, 3, 4) // -> 10\r\n```\r\n\r\n1. Declare a function name _userIdGenerator_. When this function is called it generates seven character id. The function return the id.\r\n\r\n```sh\r\nconsole.log(userIdGenerator());\r\n41XTDbE\r\n```\r\n\r\n##### Exercises: Level 3\r\n\r\n1. Declare a function name _userIdGeneratedByUser_. It doesn’t take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated.\r\n\r\n ```sh\r\n userIdGeneratedByUser()\r\n 'kcsy2\r\n SMFYb\r\n bWmeq\r\n ZXOYh\r\n 2Rgxf\r\n '\r\n userIdGeneratedByUser()\r\n '1GCSgPLMaBAVQZ26\r\n YD7eFwNQKNs7qXaT\r\n ycArC5yrRupyG00S\r\n UbGxOFI7UXSWAyKN\r\n dIV0SSUTgAdKwStr\r\n '\r\n ```\r\n\r\n2. Write a function **_generateColors_** which can generate any number of hexa or rgb colors.\r\n\r\n ```js\r\n console.log(generateColors('hexa', 3)) // ['#a3e12f', '#03ed55', '#eb3d2b']\r\n console.log(generateColors('hexa', 1)) // '#b334ef'\r\n console.log(generateColors('rgb', 3)) // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)']\r\n console.log(generateColors('rgb', 1)) // 'rgb(33,79, 176)'\r\n ```\r\n\r\n3. Call your function _shuffleArray_, it takes an array as a parameter and it returns a shuffled array\r\n4. Call your function _factorial_, it takes a whole number as a parameter and it return a factorial of the number\r\n5. Call your function _isEmpty_, it takes a parameter and it checks if it is empty or not\r\n\r\n6. Write a function called _average_, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give return reasonable feedback.\r\n\r\n### 9. Higher Order Function\r\n\r\nHigher order functions are functions which take other function as a parameter or return a function as a value. The function passed as a parameter is called callback.\r\n\r\n#### Callback\r\n\r\nA callback is a function which can be passed as parameter to other function. See the example below.\r\n\r\n```js\r\n// a callback function, the function could be any name\r\nconst callback = (n) => {\r\n return n ** 2\r\n}\r\n​\r\n// function take other function as a callback\r\nfunction cube(callback, n) {\r\n return callback(n) * n\r\n}\r\n​\r\nconsole.log(cube(callback, 3))\r\n```\r\n\r\n#### Returning function\r\n\r\nHigher order functions return function as a value\r\n​\r\n\r\n```js\r\n// Higher order function returning an other function\r\nconst higherOrder = n => {\r\n const doSomething = m => {\r\n const doWhatEver = t => {\r\n return 2 * n + 3 * m + t\r\n }\r\n return doWhatEver\r\n }\r\n​\r\n return doSomething\r\n}\r\nconsole.log(higherOrder(2)(3)(10))\r\n```\r\n\r\nLet us see were we use call back functions.For instance the _forEach_ method uses call back.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4]\r\nconst sumArray = arr => {\r\n let sum = 0\r\n const callback = function(element) {\r\n sum += element\r\n }\r\n arr.forEach(callback)\r\n return sum\r\n\r\n}\r\nconsole.log(sumArray(numbers))\r\n```\r\n\r\n```sh\r\n10\r\n```\r\n\r\nThe above example can be simplified as follows:\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4]\r\n​\r\nconst sumArray = arr => {\r\n let sum = 0\r\n arr.forEach(function(element) {\r\n sum += element\r\n })\r\n return sum\r\n\r\n}\r\nconsole.log(sumArray(numbers))\r\n```\r\n\r\n```sh\r\n10\r\n```\r\n\r\n#### setting time\r\n\r\nIn JavaScript we can execute some activity on certain interval of time or we can schedule(wait) for sometime to execute some activities.\r\n\r\n- setInterval\r\n- setTimeout\r\n\r\n##### setInterval\r\n\r\nIn JavaScript, we use setInterval higher order function to do some activity continuously with in some interval of time. The setInterval global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback will be always called in that interval of time.\r\n\r\n```js\r\n// syntax\r\nfunction callback() {\r\n // code goes here\r\n}\r\nsetInterval(callback, duration)\r\n```\r\n\r\n```js\r\nfunction sayHello() {\r\n console.log('Hello')\r\n}\r\nsetInterval(sayHello, 2000) // it prints hello in every 2 seconds\r\n```\r\n\r\n##### setTimeout\r\n\r\nIn JavaScript, we use setTimeout higher order function to execute some action at some time in the future. The setTimeout global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback wait for that amount of time.\r\n\r\n```js\r\n// syntax\r\nfunction callback() {\r\n // code goes here\r\n}\r\nsetTimeout(callback, duration) // duration in milliseconds\r\n```\r\n\r\n```js\r\nfunction sayHello() {\r\n console.log('Hello')\r\n}\r\nsetTimeout(sayHello, 2000) // it prints hello after it waits for 2 seconds.\r\n```\r\n\r\n### 10. Destructuring and Spreading\r\n\r\n#### What is Destructuring?\r\n\r\nDestructuring is a way to unpack arrays, and objects and assigning to a distinct variable. Destructuring allows us to write clean and readable code.\r\n\r\n#### What can we destructure?\r\n\r\n1. Arrays\r\n2. Objects\r\n\r\n##### 1. Destructuring arrays\r\n\r\nArrays are a list of different data types ordered by their index. Let's see an example of arrays:\r\n\r\n```js\r\nconst numbers = [1, 2, 3]\r\nconst countries = ['Finland', 'Sweden', 'Norway']\r\n```\r\n\r\nWe can access an item from an array using a certain index by iterating through the loop or manually as shown in the example below.\r\n\r\nAccessing array items using a loop\r\n\r\n```js\r\nfor (const number of numbers) {\r\n console.log(number)\r\n}\r\n\r\nfor (const country of countries) {\r\n console.log(country)\r\n}\r\n```\r\n\r\nAccessing array items manually\r\n\r\n```js\r\nconst numbers = [1, 2, 3]\r\nlet num1 = numbers[0]\r\nlet num2 = numbers[1]\r\nlet num3 = numbers[2]\r\nconsole.log(num1, num2, num3) // 1, 2, 3\r\n\r\nconst countries = ['Finland', 'Sweden', 'Norway']\r\nlet fin = countries[0]\r\nlet swe = countries[1]\r\nlet nor = countries[2]\r\nconsole.log(fin, swe, nor) // Finland, Sweden, Norway\r\n```\r\n\r\nMost of the time the size of an array is big and we use a loop to iterate through each item of the arrays. Sometimes, we may have short arrays. If the array size is very short it is ok to access the items manually as shown above but today we will see a better way to access the array item which is destructuring.\r\n\r\nAccessing array items using destructuring\r\n\r\n```js\r\nconst numbers = [1, 2, 3]\r\nconst [num1, num2, num3] = numbers\r\nconsole.log(num1, num2, num3) // 1, 2, 3,\r\n\r\nconst constants = [2.72, 3.14, 9.81,37, 100]\r\nconst [e, pi, gravity, bodyTemp, boilingTemp] = constants\r\nconsole.log(e, pi, gravity, bodyTemp, boilingTemp]\r\n// 2.72, 3.14, 9.81, 37,100\r\nconst countries = ['Finland', 'Sweden', 'Norway']\r\nconst [fin, swe, nor] = countries\r\nconsole.log(fin, swe, nor) // Finland, Sweden, Norway\r\n```\r\n\r\nDuring destructuring each variable should match with the index of the desired item in the array. For instance, the variable fin matches to index 0 and the variable nor matches to index 2. What would be the value of den if you have a variable den next nor?\r\n\r\n```js\r\nconst [fin, swe, nor, den] = countries\r\nconsole.log(den) // undefined\r\n```\r\n\r\nIf you tried the above task you confirmed that the value is undefined. Actually, we can pass a default value to the variable, and if the value of that specific index is undefined the default value will be used.\r\n\r\n```js\r\nconst countries = ['Finland', 'Sweden', undefined, 'Norway']\r\nconst [fin, swe, ice = 'Iceland', nor, den = 'Denmark'] = countries\r\nconsole.log(fin, swe, ice, nor, den) // Finland, Sweden, Iceland, Norway, Denmark\r\n```\r\n\r\nDestructuring Nested arrays\r\n\r\n```js\r\nconst fullStack = [\r\n ['HTML', 'CSS', 'JS', 'React'],\r\n ['Node', 'Express', 'MongoDB']\r\n]\r\n\r\nconst [frontEnd, backEnd] = fullstack\r\nconsole.log(frontEnd, backEnd)\r\n\r\n//[\"HTML\", \"CSS\", \"JS\", \"React\"] , [\"Node\", \"Express\", \"MongoDB\"]\r\n\r\nconst fruitsAndVegetables = [['banana', 'orange', 'mango', 'lemon'], ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']]\r\n\r\nconst [fruits, vegetables] = fruitsAndVegetables\r\nconsole.log(fruits, vegetables]\r\n\r\n//['banana', 'orange', 'mango', 'lemon']\r\n\r\n//['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']\r\n```\r\n\r\nSkipping an Item during destructuring\r\n\r\nDuring destructuring if we are not interested in every item, we can omit a certain item by putting a comma at that index. Let's get only Finland, Iceland, and Denmark from the array. See the example below for more clarity:\r\n\r\n```js\r\nconst countries = ['Finland', 'Sweden', 'Iceland', 'Norway', 'Denmark']\r\nconst [fin, , ice, , den] = countries\r\nconsole.log(fin, ice, den) // Finland, Iceland, Denmark\r\n```\r\n\r\nGetting the rest of the array using the spread operator\r\nWe use three dots(...) to spread or get the rest of an array during destructuring\r\n\r\n```js\r\nconst nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst [num1, num2, num3, ...rest] = nums\r\nconsole.log(num1, num2, num3, rest) //1, 2, 3, [4, 5, 6, 7, 8, 9, 10]\r\n\r\nconst countries = [\r\n 'Germany',\r\n 'France',\r\n 'Belgium',\r\n 'Finland',\r\n 'Sweden',\r\n 'Norway',\r\n 'Denmark',\r\n 'Iceland',\r\n]\r\n\r\nlet [gem, fra, , ...nordicCountries] = countries\r\nconsole.log(gem, fra, nordicCountries)\r\n// Germany, France, [\"Finland\", \"Sweden\", \"Norway\", \"Denmark\", \"Iceland\"]\r\n```\r\n\r\nThere many cases in which we use array destructuring, let's see the following example:\r\n\r\nDestructuring when we loop through arrays\r\n\r\n```js\r\nconst countries = [\r\n ['Finland', 'Helsinki'],\r\n ['Sweden', 'Stockholm'],\r\n ['Norway', 'Oslo'],\r\n]\r\n\r\nfor (const [country, city] of countries) {\r\n console.log(country, city)\r\n}\r\n\r\nconst fullStack = [\r\n ['HTML', 'CSS', 'JS', 'React'],\r\n ['Node', 'Express', 'MongoDB'],\r\n]\r\n\r\nfor (const [first, second, third, fourth] of fullStack) {\r\n console.log(first, second, third, fourt)\r\n}\r\n```\r\n\r\nWhat do you think about the code snippet below? If you have started React Hooks already it may remind you of the useState hook.\r\n\r\n```js\r\nconst [x, y] = [2, (value) => value ** 2]\r\n```\r\n\r\nWhat is the value of x? And what is the value of y(x)? I leave this for you to figure out.\r\n\r\nIf you have used react hooks you are very familiar with this and as you may imagine it is destructuring. The initial value of count is 0 and the setCount is a method that changes the value of count.\r\n\r\n```js\r\nconst [count, setCount] = useState(0)\r\n```\r\n\r\nNow, you know how to destructure arrays. Let's move on to destructuring objects.\r\n\r\n##### 2. Destructuring objects\r\n\r\nAn object literal is made of key and value pairs. A very simple example of an object:\r\n\r\n```js\r\nconst rectangle = {\r\n width: 20,\r\n height: 10,\r\n}\r\n```\r\n\r\nWe access the value of an object using the following methods:\r\n\r\n```js\r\nconst rectangle = {\r\n width: 20,\r\n height: 10,\r\n}\r\n\r\nlet width = rectangle.width\r\nlet height = recangle.height\r\n\r\n// or\r\n\r\nlet width = rectangle[width]\r\nlet height = recangle[height]\r\n```\r\n\r\nBut today, we will see how to access the value of an object using destructuring.\r\n\r\nWhen we destructure an object the name of the variable should be exactly the same as the key or property of the object. See the example below.\r\n\r\n```js\r\nconst rectangle = {\r\n width: 20,\r\n height: 10,\r\n}\r\n\r\nlet { width, height } = rectangle\r\nconsole.log(width, height, perimeter) // 20, 10\r\n```\r\n\r\nWhat will be the value of we try to access a key which not in the object.\r\n\r\n```js\r\nconst rectangle = {\r\n width: 20,\r\n height: 10,\r\n}\r\n\r\nlet { width, height, perimeter } = rectangleconsole.log(\r\n width,\r\n height,\r\n perimeter\r\n) // 20, 10, undefined\r\n```\r\n\r\nThe value of the perimeter in the above example is undefined.\r\n\r\nDefault value during object destructuring\r\n\r\nSimilar to the array, we can also use a default value in object destructuring.\r\n\r\n```js\r\nconst rectangle = {\r\n width: 20,\r\n height: 10,\r\n}\r\n\r\nlet { width, height, perimeter = 200 } = rectangle\r\nconsole.log(width, height, perimeter) // 20, 10, undefined\r\n```\r\n\r\nRenaming variable names\r\n\r\n```js\r\nconst rectangle = {\r\n width: 20,\r\n height: 10,\r\n}\r\n\r\nlet { width: w, height: h } = rectangle\r\n```\r\n\r\nLet's also destructure, nested objects. In the example below, we have nested objects and we can destructure it in two ways.\r\n\r\nWe can just destructure step by step\r\n\r\n```js\r\nconst props = {\r\n user:{\r\n firstName:'Asabeneh',\r\n lastName:'Yetayeh',\r\n age:250\r\n },\r\n post:{\r\n title:'Destructuring and Spread',\r\n subtitle:'ES6',\r\n year:2020\r\n},\r\nskills:['JS', 'React', 'Redux', 'Node', 'Python']\r\n\r\n}\r\n}\r\n\r\nconst {user, post, skills} = props\r\nconst {firstName, lastName, age} = user\r\nconst {title, subtitle, year} = post\r\nconst [skillOne, skillTwo, skillThree, skillFour, skillFive] = skills\r\n```\r\n\r\n1. We can destructure it one step\r\n\r\n```js\r\nconst props = {\r\n user:{\r\n firstName:'Asabeneh',\r\n lastName:'Yetayeh',\r\n age:250\r\n },\r\n post:{\r\n title:'Destructuring and Spread',\r\n subtitle:'ES6',\r\n year:2020\r\n},\r\nskills:['JS', 'React', 'Redux', 'Node', 'Python']\r\n\r\n}\r\n\r\n}\r\n\r\nconst {user:{firstName, lastName, age}, post:{title, subtitle, year}, skills:[skillOne, skillTwo, skillThree, skillFour, skillFive]} = props\r\n\r\n```\r\n\r\nDestructuring during loop through an array\r\n\r\n```js\r\nconst languages = [\r\n { lang: 'English', count: 91 },\r\n { lang: 'French', count: 45 },\r\n { lang: 'Arabic', count: 25 },\r\n { lang: 'Spanish', count: 24 },\r\n { lang: 'Russian', count: 9 },\r\n { lang: 'Portuguese', count: 9 },\r\n { lang: 'Dutch', count: 8 },\r\n { lang: 'German', count: 7 },\r\n { lang: 'Chinese', count: 5 },\r\n { lang: 'Swahili', count: 4 },\r\n { lang: 'Serbian', count: 4 },\r\n]\r\n\r\nfor (const { lang, count } of languages) {\r\n console.log(`The ${lang} is spoken in ${count} countries.`)\r\n}\r\n```\r\n\r\nDestructuring function parameter\r\n\r\n```js\r\nconst rectangle = { width: 20, height: 10 }\r\nconst calcualteArea = ({ width, height }) => width * height\r\nconst calculatePerimeter = ({ width, height } = 2 * (width + height))\r\n```\r\n\r\n#### Exercises\r\n\r\nCreate a function called getPersonInfo. The getPersonInfo function takes an object parameter. The structure of the object and the output of the function is given below. Try to use both a regular way and destructuring and compare the cleanness of the code. If you want to compare your solution with my solution, check this link.\r\n\r\n```js\r\nconst person = {\r\n firstName: 'Asabeneh',\r\n lastName: 'Yetayeh',\r\n age: 250,\r\n country: 'Finland',\r\n job: 'Instructor and Developer',\r\n skills: [\r\n 'HTML',\r\n 'CSS',\r\n 'JavaScript',\r\n 'React',\r\n 'Redux',\r\n 'Node',\r\n 'MongoDB',\r\n 'Python',\r\n 'D3.js',\r\n ],\r\n languages: ['Amharic', 'English', 'Suomi(Finnish)'],\r\n}\r\n\r\n/*\r\nAsabeneh Yetayeh lives in Finland. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)\r\n*/\r\n```\r\n\r\n#### Spread or Rest Operator\r\n\r\nWhen we destructure an array we use the spread operator(...) to get the rest elements as array. In addition to that we use spread operator to spread arr elements to another array.\r\n\r\n##### Spread operator to get the rest of array elements\r\n\r\n```js\r\nconst nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nlet [num1, num2, num3, ...rest] = nums\r\n​\r\nconsole.log(num1, num2, num3)\r\nconsole.log(rest)\r\n```\r\n\r\n```sh\r\n1 2 3\r\n[4, 5, 6, 7, 8, 9, 10]\r\n```\r\n\r\n```js\r\nconst countries = [\r\n 'Germany',\r\n 'France',\r\n 'Belgium',\r\n 'Finland',\r\n 'Sweden',\r\n 'Norway',\r\n 'Denmark',\r\n 'Iceland',\r\n]\r\n\r\nlet [gem, fra, , ...nordicCountries] = countries\r\n\r\nconsole.log(gem)\r\nconsole.log(fra)\r\nconsole.log(nordicCountries)\r\n```\r\n\r\n```sh\r\nGermany\r\nFrance\r\n[\"Finland\", \"Sweden\", \"Norway\", \"Denmark\", \"Iceland\"]\r\n```\r\n\r\n##### Spread operator to copy array\r\n\r\n```js\r\nconst evens = [0, 2, 4, 6, 8, 10]\r\nconst evenNumbers = [...evens]\r\n\r\nconst odds = [1, 3, 5, 7, 9]\r\nconst oddNumbers = [...odds]\r\n\r\nconst wholeNumbers = [...evens, ...odds]\r\n\r\nconsole.log(evenNumbers)\r\nconsole.log(oddNumbers)\r\nconsole.log(wholeNumbers)\r\n```\r\n\r\n```sh\r\n[0, 2, 4, 6, 8, 10]\r\n[1, 3, 5, 7, 9]\r\n[0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9]\r\n```\r\n\r\n```js\r\nconst frontEnd = ['HTML', 'CSS', 'JS', 'React']\r\nconst backEnd = ['Node', 'Express', 'MongoDB']\r\nconst fullStack = [...frontEnd, ...backEnd]\r\n\r\nconsole.log(fullStack)\r\n```\r\n\r\n```sh\r\n[\"HTML\", \"CSS\", \"JS\", \"React\", \"Node\", \"Express\", \"MongoDB\"]\r\n```\r\n\r\n##### Spread operator to copy object\r\n\r\nWe can copy an object using a spread operator\r\n\r\n```js\r\nconst user = {\r\n name: 'Asabeneh',\r\n title: 'Programmer',\r\n country: 'Finland',\r\n city: 'Helsinki',\r\n}\r\n\r\nconst copiedUser = { ...user }\r\nconsole.log(copiedUser)\r\n```\r\n\r\n```sh\r\n{name: \"Asabeneh\", title: \"Programmer\", country: \"Finland\", city: \"Helsinki\"}\r\n```\r\n\r\nModifying or changing the object while copying\r\n\r\n```js\r\nconst user = {\r\n name: 'Asabeneh',\r\n title: 'Programmer',\r\n country: 'Finland',\r\n city: 'Helsinki',\r\n}\r\n\r\nconst copiedUser = { ...user, title: 'instructor' }\r\nconsole.log(copiedUser)\r\n```\r\n\r\n```sh\r\n{name: \"Asabeneh\", title: \"instructor\", country: \"Finland\", city: \"Helsinki\"}\r\n```\r\n\r\n##### Spread operator with arrow function\r\n\r\nWhenever we like to write an arrow function which takes unlimited number of arguments we use a spread operator. If we use a spread operator as a parameter, the argument passed when we invoke a function will change to an array.\r\n\r\n```js\r\nconst sumAllNums = (...args) => {\r\n console.log(args)\r\n}\r\n\r\nsumAllNums(1, 2, 3, 4, 5)\r\n```\r\n\r\n```sh\r\n[1, 2, 3, 4, 5]\r\n\r\n```\r\n\r\n```js\r\nconst sumAllNums = (...args) => {\r\n let sum = 0\r\n for (const num of args) {\r\n sum += num\r\n }\r\n return sum\r\n}\r\n\r\nconsole.log(sumAllNums(1, 2, 3, 4, 5))\r\n```\r\n\r\n```sh\r\n15\r\n\r\n```\r\n\r\n### 11. Functional Programming\r\n\r\nIn this article, I will try to help you to have a very good understanding of the most common feature of JavaScript, _functional programming_.\r\n\r\n_Functional programming_ allows you to write shorter code, clean code, and also to solve complicated problems which might be difficult to solve in a traditional way.\r\n\r\nIn this article we will cover all JS functional programming methods:\r\n\r\n- forEach\r\n- map\r\n- filter\r\n- reduce\r\n- find\r\n- findIndex\r\n- some\r\n- every\r\n\r\n#### 1. forEach\r\n\r\nWe use forEach when we like to iterate through an array of items. The forEach is a higher-order function and it takes call-back as a parameter. The forEach method is used only with array and we use forEach if you are interested in each item or index or both.\r\n\r\n```js\r\n// syntax in a normal or a function declaration\r\n\r\nfunction callback(item, index, arr) {}\r\narray.forEach(callback)\r\n\r\n// or syntax in an arrow function\r\nconst callback = (item, i, arr) => {}\r\narray.forEach(callback)\r\n```\r\n\r\nThe call back function could be a function declaration or an arrow function.\r\n\r\nLet see different examples\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway']\r\ncountries.forEach(function (country, index, arr) {\r\n console.log(i, country.toUpperCase())\r\n})\r\n```\r\n\r\nIf there is no much code inside the code block we can use an arrow function and we can write it without a curly bracket. The index and the array parameters are optional, we can omit them.\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway']\r\ncountries.forEach((country, i) => console.log(i, country.toUpperCase()))\r\n```\r\n\r\n```sh\r\n0 \"FINLAND\"\r\n1 \"ESTONIA\"\r\n2 \"SWEDEN\"\r\n3 \"NORWAY\"\r\n```\r\n\r\nFor example if we like to change each country to uppercase and store it back to an array we write it as follows.\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway']\r\nconst newCountries = []\r\ncountries.forEach((country) => newCountries.push(country))\r\n\r\nconsole.log(newCountries) // [\"Finland\", \"Estonia\", \"Sweden\", \"Norway\"]\r\n```\r\n\r\nLet us see more examples. For instance if we want to sum an array of numbers we can use forEach or reduce. Let us see how we use forEach to sum all numbers in an array.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nlet sum = 0\r\nnumbers.forEach((n) => (sum += n))\r\n\r\nconsole.log(sum) // 15\r\n```\r\n\r\nLet us move to the next functional programming method which is going to be a map.\r\n\r\n#### 2. map\r\n\r\nWe use the map method whenever we like to modify an array. We use the map method only with arrays and it always returns an array.\r\n\r\n```js\r\n// syntax in a normal or a function declaration\r\n\r\nfunction callback(item, i) {\r\n return // code goes here\r\n}\r\n\r\nconst modifiedArray = array.map(callback)\r\n\r\n// or syntax in an arrow function\r\n\r\nconst callback = (item, i) => {\r\n return // code goes here\r\n}\r\nconst modifiedArray = array.map(callback)\r\n```\r\n\r\nNow, let us modify the countries array using the map method. The index is an optional parameter\r\n\r\n```js\r\n// Using function declaration\r\n\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway']\r\n\r\nconst newCountries = countries.map(function (country) {\r\n return country.toUpperCase()\r\n})\r\n\r\nconsole.log(newCountries)\r\n\r\n// map using an arrow function call back\r\n\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway']\r\nconst newCountries = countries.map((country) => country.toUpperCase())\r\n\r\nconsole.log(newCountries) // [\"FINLAND\", \"ESTONIA\", \"SWEDEN\", \"NORWAY\"]\r\n```\r\n\r\nAs you can see that map is very handy to modify an array and to get an array back. Now, let us create an array of the length of the countries from the countries array.\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway']\r\nconst countriesLength = countries.map((country) => country.length)\r\n\r\nconsole.log(countriesLength) // [7, 7, 6, 6]\r\n```\r\n\r\nLet us see another more example\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconst squares = numbers.map((n) => n ** 2)\r\n\r\nconsole.log(squares) // [1, 4, 9, 16, 25]\r\n```\r\n\r\n#### 3. filter\r\n\r\nAs you may understand from the literal meaning of filter, it filters out items based on some criteria. The filter method like forEach and map is used with an array and it returns an array of the filtered items.\r\n\r\nFor instance if we want to filter out countries containing a substring land from an array of countries. See the example below:\r\n\r\n```js\r\n// syntax in a normal or a function declaration\r\nfunction callback(item) {\r\n return // boolean\r\n}\r\n\r\nconst filteredArray = array.filter(callback)\r\n\r\n// or syntax in an arrow function\r\n\r\nconst callback = (item) => {\r\n return // boolean\r\n}\r\nconst filteredArray = array.filter(callback)\r\n```\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']\r\nconst countriesWithLand = countries.filter((country) =>\r\n country.includes('land')\r\n)\r\nconsole.log(countriesWithLand) // [\"Finland\", \"Iceland\"]\r\n```\r\n\r\nHow about if we want to filter out countries not containing the substring land. We use negation to achieve that.\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']\r\nconst countriesWithLand = countries.filter(\r\n (country) => !country.includes('land')\r\n)\r\nconsole.log(countriesWithLand) // [\"Estonia\", \"Sweden\", \"Norway\"]\r\n```\r\n\r\nLet's see an additional example about the filter, let us filter even or odd numbers from an array of numbers\r\n\r\n```js\r\nconst numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst evens = numbers.filter((n) => n % 2 === 0)\r\nconst odds = numbers.filter((n) => n % 2 !== 0)\r\nconsole.log(evens) // [0, 2, 4, 6, 8, 10]\r\nconsole.log(odds) // [1, 3, 5, 7, 9]\r\n```\r\n\r\nNow, you know how to filter let us move on to the next functional programming, reduce.\r\n\r\n#### 4. reduce\r\n\r\nLike forEach, map, and filter, reduce is also used with an array and it returns a single value. You can associate reduce with a blender. You put different fruits to a blend and you get a mix of fruit juice. The juice is the output from the reduction process.\r\n\r\nWe use the reduce method to sum all numbers in an array together, or to multiply items in an array or to concatenate items in an array. Let us see the following different example to make this explanation more clear.\r\n\r\n```js\r\n// syntax in a normal or a function declaration\r\n\r\nfunction callback(acc, cur) {\r\n return // code goes here\r\n}\r\n\r\nconst reduced = array.reduce(callback, optionalInitialValue)\r\n\r\n// or syntax in an arrow function\r\n\r\nconst reduced = callback(acc, cur) => {\r\n return // code goes here\r\n}\r\nconst reduced = array.reduce(callback)\r\n```\r\n\r\nThe default initial value is 0. We can change the initial value if we want to change it.\r\n\r\nFor instance if we want to add all items in an array and if all the items are numbers we can use reduce.\r\n\r\n```js\r\nconst numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst sum = numbers.reduce((acc, cur) => acc + cur)\r\nconsole.log(sum) // 55\r\n```\r\n\r\nReduce has a default initial value which is zero. Now, let us use a different initial value which is 5 in this case.\r\n\r\n```js\r\nconst numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst sum = numbers.reduce((acc, cur) => acc + cur, 5)\r\nconsole.log(sum) // 60\r\n```\r\n\r\nLet us concatenate strings using reduce\r\n\r\n```js\r\nconst strs = ['Hello', 'world', '!']\r\nconst helloWorld = strs.reduce((acc, cur) => acc + ' ' + cur)\r\nconsole.log(helloWorld) // \"Hello world !\"\r\n```\r\n\r\nWe can multiply items of an array using reduce and we will return the value.\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconst value = numbers.reduce((acc, cur) => acc * cur)\r\nconsole.log(value) // 120\r\n```\r\n\r\nLet us try it with an initial value\r\n\r\n```js\r\nconst numbers = [1, 2, 3, 4, 5]\r\nconst value = numbers.reduce((acc, cur) => acc * cur, 10)\r\nconsole.log(value) // 1200\r\n```\r\n\r\n#### 5. find\r\n\r\nIf we are interested in the first occurrence of a certain item or element in an array we can use find method. Unlike map and filter, find just return the first occurrence of an item instead of an array.\r\n\r\n```js\r\n// syntax in a normal or a function declaration\r\n\r\nfunction callback(item) {\r\nreturn // code goes here\r\n}\r\n\r\nconst item = array.find(callback)\r\n\r\n// or syntax in an arrow function\r\n\r\nconst reduced = callback(item) => {\r\nreturn // code goes here\r\n}\r\nconst item = array.find(callback)\r\n```\r\n\r\nLet find the first even number and the first odd number in the numbers array.\r\n\r\n```js\r\nconst numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst firstEvenNum = numbers.find((n) => n % 2 === 0)\r\nconst firstOddNum = numbers.find((n) => n % 2 !== 0)\r\nconsole.log(firstEvenNum) // 0\r\nconsole.log(firstOddNum) // 1\r\n```\r\n\r\nLet us find the first country which contains a substring way\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']\r\nconst countryWithWay = countries.find((country) => country.includes('way'))\r\nconsole.log(countriesWithWay) // Norway\r\n```\r\n\r\nLet us find the first country which has only six characters\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']\r\nconst sixCharsCountry = countries.find((country) => country.length === 6)\r\nconsole.log(sixCharsCountry) // Sweden\r\n```\r\n\r\nLet us find the first country in the array which has the letter 'o'\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']\r\nconst index = countries.find((country) => country.includes('o'))\r\nconsole.log(index // Estonia\r\n```\r\n\r\n#### 6. findIndex\r\n\r\nThe findIndex method works like find but findIndex returns the index of the item. If we are interested in the index of a certain item or element in an array we can use findIndex. The findIndex return the index of the first occurrence of an item.\r\n\r\n```js\r\n// syntax in a normal or a function declaration\r\n\r\nfunction callback(item) {\r\nreturn // code goes here\r\n}\r\n\r\nconst index = array.findIndex(callback)\r\n\r\n// or syntax in an arrow function\r\n\r\nconst reduced = callback(item) => {\r\nreturn // code goes here\r\n}\r\nconst index = array.findIndex(callback)\r\n```\r\n\r\nLet us find the index of the first even number and the index of the first odd number in the numbers array.\r\n\r\n```js\r\nconst numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst firstEvenIndex = numbers.findIndex((n) => n % 2 === 0)\r\nconst firstOddIndex = numbers.findIndex((n) => n % 2 !== 0)\r\nconsole.log(firstEvenIndex) // 0\r\nconsole.log(firstOddIndex) // 1\r\n```\r\n\r\nLet us find the index of the first country in the array which has exactly six characters\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']\r\nconst index = countries.findIndex((country) => country.length === 6)\r\nconsole.log(index //2\r\n```\r\n\r\nLet us find the index of the first country in the array which has the letter 'o'.\r\n\r\n```js\r\nconst countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']\r\nconst index = countries.findIndex((country) => country.includes('o'))\r\nconsole.log(index // 1\r\n```\r\n\r\nLet us move on to the next functional programming, some.\r\n\r\n#### 7. some\r\n\r\nThe some method is used with array and return a boolean. If one or some of the items satisfy the criteria the result will be true else it will be false. Let us see it with an example.\r\n\r\nIn the following array some numbers are even and some are odd, so if I ask you a question, are there even numbers in the array then your answer will be yes. If I ask you also another question, are there odd numbers in the array then your answer will be yes. On the contrary, if I ask you, are all the numbers even or odd then your answer will be no because all the numbers are not even or odd.\r\n\r\n```js\r\nconst numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst someAreEvens = numbers.some((n) => n % 2 === 0)\r\nconst someAreOdds = numbers.some((n) => n % 2 !== 0)\r\nconsole.log(someAreEvens) // true\r\nconsole.log(someAreOdds) // true\r\n```\r\n\r\nLet us another example\r\n\r\n```js\r\nconst evens = [0, 2, 4, 6, 8, 10]\r\nconst someAreEvens = evens.some((n) => n % 2 === 0)\r\nconst someAreOdds = evens.some((n) => n % 2 !== 0)\r\nconsole.log(someAreEvens) // true\r\nconsole.log(someAreOdds) // false\r\n```\r\n\r\nNow, let us see one more functional programming, every.\r\n\r\n#### 8. every\r\n\r\nThe method every is somehow similar to some but every item must satisfy the criteria. The method every like some returns a boolean.\r\n\r\n```js\r\n\r\nconst numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nconst allAreEvens = numbers.every((n) => n % 2 === 0)\r\nconst allAreOdd s= numbers.every((n) => n % 2 !== 0)\r\n\r\nconsole.log(allAreEven) // false\r\nconsole.log(allAreOdd) // false\r\n\r\nconst evens = [0, 2, 4, 6, 8, 10]\r\nconst someAreEvens = evens.some((n) => n % 2 === 0)\r\nconst someAreOdds = evens.some((n) => n % 2 !== 0)\r\n\r\nconsole.log(someAreEvens) // true\r\nconsole.log(someAreOdds) // false\r\n```\r\n\r\n#### Exercises\r\n\r\n```js\r\nconst products = [\r\n { product: 'banana', price: 3 },\r\n { product: 'mango', price: 6 },\r\n { product: 'potato', price: ' ' },\r\n { product: 'avocado', price: 8 },\r\n { product: 'coffee', price: 10 },\r\n { product: 'tea', price: '' },\r\n]\r\n```\r\n\r\n1. Print the price of each product using forEach\r\n2. Print the product items as follows using forEach\r\n\r\n ```sh\r\n The price of banana is 3 euros.\r\n The price of mango is 6 euros.\r\n The price of potato is unknown.\r\n The price of avocado is 8 euros.\r\n The price of coffee is 10 euros.\r\n The price of tea is unknown.\r\n ```\r\n\r\n3. Calculate the sum of all the prices using forEach\r\n4. Create an array of prices using map and store it in a variable prices\r\n5. Filter products with prices\r\n6. Use method chaining to get the sum of the prices(map, filter, reduce)\r\n7. Calculate the sum of all the prices using reduce only\r\n8. Find the first product which doesn't have a price value\r\n9. Find the index of the first product which does not have price value\r\n10. Check if some products do not have a price value\r\n11. Check if all the products have price value\r\n12. Explain the difference between forEach, map, filter and reduce\r\n13. Explain the difference between filter, find and findIndex\r\n14. Explain the difference between some and every\r\n\r\n### 12. Classes\r\n\r\nJavaScript is an object oriented programming language. Everything in JavScript is an object, with its properties and methods. We create class to create an object. A Class is like an object constructor, or a \"blueprint\" for creating objects. We instantiate a class to create an object. The class defines attributes and the behavior of the object, while the object, on the other hand, represents the class.\r\n\r\nOnce we create a class we can create object from it whenever we want. Creating an object from a class is called class instantiation.\r\n\r\nIn the object section, we saw how to create an object literal. Object literal is a singleton. If we want to get a similar object , we have to write it. However, class allows to create many objects. This helps to reduce amount of code and repetition of code.\r\n\r\n#### Defining a classes\r\n\r\nTo define a class in JavaScript we need the keyword _class_ , the name of a class in **CamelCase** and block code(two curly brackets). Let us create a class name Person.\r\n\r\n```sh\r\n// syntax\r\nclass ClassName {\r\n // code goes here\r\n}\r\n\r\n```\r\n\r\n**Example:**\r\n\r\n```js\r\nclass Person {\r\n // code goes here\r\n}\r\n```\r\n\r\nWe have created an Person class but it does not have any thing inside.\r\n\r\n#### Class Instantiation\r\n\r\nInstantiation class means creating an object from a class. We need the keyword _new_ and we call the name of the class after the word new.\r\n\r\nLet us create a dog object from our Person class.\r\n\r\n```js\r\nclass Person {\r\n // code goes here\r\n}\r\nconst person = new Person()\r\nconsole.log(person)\r\n```\r\n\r\n```sh\r\nPerson {}\r\n```\r\n\r\nAs you can see, we have created a person object. Since the class did not have any properties yet the object is also empty.\r\n\r\nLet use the class constructor to pass different properties for the class.\r\n\r\n#### Class Constructor\r\n\r\nThe constructor is a builtin function which allows as to create a blueprint for our object. The constructor function starts with a keyword constructor followed by a parenthesis. Inside the parenthesis we pass the properties of the object as parameter. We use the _this_ keyword to attach the constructor parameters with the class.\r\n\r\nThe following Person class constructor has firstName and lastName property. These properties are attached to the Person class using _this_ keyword. _This_ refers to the class itself.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName) {\r\n console.log(this) // Check the output from here\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n }\r\n}\r\n\r\nconst person = new Person()\r\n\r\nconsole.log(person)\r\n```\r\n\r\n```sh\r\nPerson {firstName: undefined, lastName}\r\n```\r\n\r\nAll the keys of the object are undefined. When ever we instantiate we should pass the value of the properties. Let us pass value at this time when we instantiate the class.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh')\r\n\r\nconsole.log(person1)\r\n```\r\n\r\n```sh\r\nPerson {firstName: \"Asabeneh\", lastName: \"Yetayeh\"}\r\n```\r\n\r\nAs we have stated at the very beginning that once we create a class we can create many object using the class. Now, let us create many person objects using the Person class.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName) {\r\n console.log(this) // Check the output from here\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh')\r\nconst person2 = new Person('Lidiya', 'Tekle')\r\nconst person3 = new Person('Abraham', 'Yetayeh')\r\n\r\nconsole.log(person1)\r\nconsole.log(person2)\r\nconsole.log(person3)\r\n```\r\n\r\n```sh\r\nPerson {firstName: \"Asabeneh\", lastName: \"Yetayeh\"}\r\nPerson {firstName: \"Lidiya\", lastName: \"Tekle\"}\r\nPerson {firstName: \"Abraham\", lastName: \"Yetayeh\"}\r\n```\r\n\r\nUsing the class Person we created three persons object. As you can see our class did not many properties let us add more properties to the class.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName, age, country, city) {\r\n console.log(this) // Check the output from here\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki')\r\n\r\nconsole.log(person1)\r\n```\r\n\r\n```sh\r\nPerson {firstName: \"Asabeneh\", lastName: \"Yetayeh\", age: 250, country: \"Finland\", city: \"Helsinki\"}\r\n```\r\n\r\n#### Default values with constructor\r\n\r\nThe constructor function properties may have a default value like other regular functions.\r\n\r\n```js\r\nclass Person {\r\n constructor(\r\n firstName = 'Asabeneh',\r\n lastName = 'Yetayeh',\r\n age = 250,\r\n country = 'Finland',\r\n city = 'Helsinki'\r\n ) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n }\r\n}\r\n\r\nconst person1 = new Person() // it will take the default values\r\nconst person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo')\r\n\r\nconsole.log(person1)\r\nconsole.log(person2)\r\n```\r\n\r\n```sh\r\nPerson {firstName: \"Asabeneh\", lastName: \"Yetayeh\", age: 250, country: \"Finland\", city: \"Helsinki\"}\r\nPerson {firstName: \"Lidiya\", lastName: \"Tekle\", age: 28, country: \"Finland\", city: \"Espoo\"}\r\n```\r\n\r\n#### Class methods\r\n\r\nThe constructor inside a class is a builtin function which allow us to create a blueprint for the object. In a class we can create class methods. Methods are JavaScript functions inside the class. Let us create some class methods.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName, age, country, city) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n }\r\n getFullName() {\r\n const fullName = this.firstName + ' ' + this.lastName\r\n return fullName\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki')\r\nconst person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo')\r\n\r\nconsole.log(person1.getFullName())\r\nconsole.log(person2.getFullName())\r\n```\r\n\r\n```sh\r\nAsabeneh Yetayeh\r\ntest.js:19 Lidiya Tekle\r\n```\r\n\r\n#### Properties with initial value\r\n\r\nWhen we create a class for some properties we may have an initial value. For instance if you are playing a game, you starting score will be zero. So, we may have a starting score or score which is zero. In other way, we may have an initial skill and we will acquire some skill after some time.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName, age, country, city) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n this.score = 0\r\n this.skills = []\r\n }\r\n getFullName() {\r\n const fullName = this.firstName + ' ' + this.lastName\r\n return fullName\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki')\r\nconst person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo')\r\n\r\nconsole.log(person1.score)\r\nconsole.log(person2.score)\r\n\r\nconsole.log(person1.skills)\r\nconsole.log(person2.skills)\r\n```\r\n\r\n```sh\r\n0\r\n0\r\n[]\r\n[]\r\n```\r\n\r\nA method could be regular method or a getter or a setter. Let us see, getter and setter.\r\n\r\n#### getter\r\n\r\nThe get method allow us to access value from the object. We write a get method using keyword _get_ followed by a function. Instead of accessing properties directly from the object we use getter to get the value. See the example bellow\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName, age, country, city) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n this.score = 0\r\n this.skills = []\r\n }\r\n getFullName() {\r\n const fullName = this.firstName + ' ' + this.lastName\r\n return fullName\r\n }\r\n get getScore() {\r\n return this.score\r\n }\r\n get getSkills() {\r\n return this.skills\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki')\r\nconst person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo')\r\n\r\nconsole.log(person1.getScore) // We do not need parenthesis to call a getter method\r\nconsole.log(person2.getScore)\r\n\r\nconsole.log(person1.getSkills)\r\nconsole.log(person2.getSkills)\r\n```\r\n\r\n```sh\r\n0\r\n0\r\n[]\r\n[]\r\n```\r\n\r\n#### setter\r\n\r\nThe setter method allow us to modify the value of certain properties. We write a setter method using keyword _set_ followed by a function. See the example bellow.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName, age, country, city) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n this.score = 0\r\n this.skills = []\r\n }\r\n getFullName() {\r\n const fullName = this.firstName + ' ' + this.lastName\r\n return fullName\r\n }\r\n get getScore() {\r\n return this.score\r\n }\r\n get getSkills() {\r\n return this.skills\r\n }\r\n set setScore(score) {\r\n this.score += score\r\n }\r\n set setSkill(skill) {\r\n this.skills.push(skill)\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki')\r\nconst person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo')\r\n\r\nperson1.setScore = 1\r\nperson1.setSkill = 'HTML'\r\nperson1.setSkill = 'CSS'\r\nperson1.setSkill = 'JavaScript'\r\n\r\nperson2.setScore = 1\r\nperson2.setSkill = 'Planning'\r\nperson2.setSkill = 'Managing'\r\nperson2.setSkill = 'Organizing'\r\n\r\nconsole.log(person1.score)\r\nconsole.log(person2.score)\r\n\r\nconsole.log(person1.skills)\r\nconsole.log(person2.skills)\r\n```\r\n\r\n```sh\r\n1\r\n1\r\n[\"HTML\", \"CSS\", \"JavaScript\"]\r\n[\"Planning\", \"Managing\", \"Organizing\"]\r\n```\r\n\r\nDo not be puzzled by the difference between regular method and a getter. If you know how to make a regular method you are good. Let us add regular method called getPersonInfo in the Person class.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName, age, country, city) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n this.score = 0\r\n this.skills = []\r\n }\r\n getFullName() {\r\n const fullName = this.firstName + ' ' + this.lastName\r\n return fullName\r\n }\r\n get getScore() {\r\n return this.score\r\n }\r\n get getSkills() {\r\n return this.skills\r\n }\r\n set setScore(score) {\r\n this.score += score\r\n }\r\n set setSkill(skill) {\r\n this.skills.push(skill)\r\n }\r\n getPersonInfo() {\r\n let fullName = this.getFullName()\r\n let skills =\r\n this.skills.length > 0 &&\r\n this.skills.slice(0, this.skills.length - 1).join(', ') +\r\n ` and ${this.skills[this.skills.length - 1]}`\r\n let formattedSkills = skills ? `He knows ${skills}` : ''\r\n\r\n let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}`\r\n return info\r\n }\r\n}\r\n\r\nconst person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki')\r\nconst person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo')\r\nconst person3 = new Person('John', 'Doe', 50, 'Mars', 'Mars city')\r\n\r\nperson1.setScore = 1\r\nperson1.setSkill = 'HTML'\r\nperson1.setSkill = 'CSS'\r\nperson1.setSkill = 'JavaScript'\r\n\r\nperson2.setScore = 1\r\nperson2.setSkill = 'Planning'\r\nperson2.setSkill = 'Managing'\r\nperson2.setSkill = 'Organizing'\r\n\r\nconsole.log(person1.getScore)\r\nconsole.log(person2.getScore)\r\n\r\nconsole.log(person1.getSkills)\r\nconsole.log(person2.getSkills)\r\nconsole.log(person3.getSkills)\r\n\r\nconsole.log(person1.getPersonInfo())\r\nconsole.log(person2.getPersonInfo())\r\nconsole.log(person3.getPersonInfo())\r\n```\r\n\r\n```sh\r\n1\r\n1\r\n[\"HTML\", \"CSS\", \"JavaScript\"]\r\n[\"Planning\", \"Managing\", \"Organizing\"]\r\n[]\r\nAsabeneh Yetayeh is 250. He lives Helsinki, Finland. He knows HTML, CSS and JavaScript\r\nLidiya Tekle is 28. He lives Espoo, Finland. He knows Planning, Managing and Organizing\r\nJohn Doe is 50. He lives Mars city, Mars.\r\n```\r\n\r\n#### Static method\r\n\r\nThe static keyword defines a static method for a class. Static methods are not called on instances of the class. Instead, they are called on the class itself. These are often utility functions, such as functions to create or clone objects. An example of static method is _Date.now()_. The _now_ method is called directly from the class.\r\n\r\n```js\r\nclass Person {\r\n constructor(firstName, lastName, age, country, city) {\r\n this.firstName = firstName\r\n this.lastName = lastName\r\n this.age = age\r\n this.country = country\r\n this.city = city\r\n this.score = 0\r\n this.skills = []\r\n }\r\n getFullName() {\r\n const fullName = this.firstName + ' ' + this.lastName\r\n return fullName\r\n }\r\n get getScore() {\r\n return this.score\r\n }\r\n get getSkills() {\r\n return this.skills\r\n }\r\n set setScore(score) {\r\n this.score += score\r\n }\r\n set setSkill(skill) {\r\n this.skills.push(skill)\r\n }\r\n getPersonInfo() {\r\n let fullName = this.getFullName()\r\n let skills =\r\n this.skills.length > 0 &&\r\n this.skills.slice(0, this.skills.length - 1).join(', ') +\r\n ` and ${this.skills[this.skills.length - 1]}`\r\n\r\n let formattedSkills = skills ? `He knows ${skills}` : ''\r\n\r\n let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}`\r\n return info\r\n }\r\n static favoriteSkill() {\r\n const skills = ['HTML', 'CSS', 'JS', 'React', 'Python', 'Node']\r\n const index = Math.floor(Math.random() * skills.length)\r\n return skills[index]\r\n }\r\n static showDateTime() {\r\n let now = new Date()\r\n let year = now.getFullYear()\r\n let month = now.getMonth() + 1\r\n let date = now.getDate()\r\n let hours = now.getHours()\r\n let minutes = now.getMinutes()\r\n if (hours < 10) {\r\n hours = '0' + hours\r\n }\r\n if (minutes < 10) {\r\n minutes = '0' + minutes\r\n }\r\n\r\n let dateMonthYear = date + '.' + month + '.' + year\r\n let time = hours + ':' + minutes\r\n let fullTime = dateMonthYear + ' ' + time\r\n return fullTime\r\n }\r\n}\r\n\r\nconsole.log(Person.favoriteSkill())\r\nconsole.log(Person.showDateTime())\r\n```\r\n\r\n```sh\r\nNode\r\n15.1.2020 23:56\r\n```\r\n\r\nThe static methods are methods which can be used as utility functions.\r\n\r\n#### Inheritance\r\n\r\nUsing inheritance we can access all the properties and the methods of the parent class. This reduces repetition of code. If you remember, we have a Person parent class and we will create children from it. Our children class could be student, teach etc.\r\n\r\n```js\r\n// syntax\r\nclass ChildClassName extends {\r\n // code goes here\r\n}\r\n```\r\n\r\nLet us create a Student child class from Person parent class.\r\n\r\n```js\r\nclass Student extends Person {\r\n saySomething() {\r\n console.log('I am a child of the person class')\r\n }\r\n}\r\n\r\nconst s1 = new Student('Asabeneh', 'Yetayeh', 'Finland', 250, 'Helsinki')\r\nconsole.log(s1)\r\nconsole.log(s1.saySomething())\r\nconsole.log(s1.getFullName())\r\nconsole.log(s1.getPersonInfo())\r\n```\r\n\r\n```sh\r\nStudent {firstName: \"Asabeneh\", lastName: \"Yetayeh\", age: \"Finland\", country: 250, city: \"Helsinki\", …}\r\nI am a child of the person class\r\nAsabeneh Yetayeh\r\nStudent {firstName: \"Asabeneh\", lastName: \"Yetayeh\", age: \"Finland\", country: 250, city: \"Helsinki\", …}\r\nAsabeneh Yetayeh is Finland. He lives Helsinki, 250.\r\n```\r\n\r\n#### Overriding methods\r\n\r\nAs you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. In side the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden.\r\n\r\n```js\r\nclass Student extends Person {\r\n constructor(firstName, lastName, age, country, city, gender) {\r\n super(firstName, lastName, age, country, city)\r\n this.gender = gender\r\n }\r\n\r\n saySomething() {\r\n console.log('I am a child of the person class')\r\n }\r\n getPersonInfo() {\r\n let fullName = this.getFullName()\r\n let skills =\r\n this.skills.length > 0 &&\r\n this.skills.slice(0, this.skills.length - 1).join(', ') +\r\n ` and ${this.skills[this.skills.length - 1]}`\r\n\r\n let formattedSkills = skills ? `He knows ${skills}` : ''\r\n let pronoun = this.gender == 'Male' ? 'He' : 'She'\r\n\r\n let info = `${fullName} is ${this.age}. ${pronoun} lives in ${this.city}, ${this.country}. ${formattedSkills}`\r\n return info\r\n }\r\n}\r\n\r\nconst s1 = new Student(\r\n 'Asabeneh',\r\n 'Yetayeh',\r\n 250,\r\n 'Finland',\r\n 'Helsinki',\r\n 'Male'\r\n)\r\nconst s2 = new Student('Lidiya', 'Tekle', 28, 'Finland', 'Helsinki', 'Female')\r\ns1.setScore = 1\r\ns1.setSkill = 'HTML'\r\ns1.setSkill = 'CSS'\r\ns1.setSkill = 'JavaScript'\r\n\r\ns2.setScore = 1\r\ns2.setSkill = 'Planning'\r\ns2.setSkill = 'Managing'\r\ns2.setSkill = 'Organizing'\r\n\r\nconsole.log(s1)\r\n\r\nconsole.log(s1.saySomething())\r\nconsole.log(s1.getFullName())\r\nconsole.log(s1.getPersonInfo())\r\n\r\nconsole.log(s2.saySomething())\r\nconsole.log(s2.getFullName())\r\nconsole.log(s2.getPersonInfo())\r\n```\r\n\r\n```sh\r\nStudent {firstName: \"Asabeneh\", lastName: \"Yetayeh\", age: 250, country: \"Finland\", city: \"Helsinki\", …}\r\nStudent {firstName: \"Lidiya\", lastName: \"Tekle\", age: 28, country: \"Finland\", city: \"Helsinki\", …}\r\nI am a child of the person class\r\nAsabeneh Yetayeh\r\nStudent {firstName: \"Asabeneh\", lastName: \"Yetayeh\", age: 250, country: \"Finland\", city: \"Helsinki\", …}\r\nAsabeneh Yetayeh is 250. He lives in Helsinki, Finland. He knows HTML, CSS and JavaScript\r\nI am a child of the person class\r\nLidiya Tekle\r\nStudent {firstName: \"Lidiya\", lastName: \"Tekle\", age: 28, country: \"Finland\", city: \"Helsinki\", …}\r\nLidiya Tekle is 28. She lives in Helsinki, Finland. He knows Planning, Managing and Organizing\r\n```\r\n\r\nNow, the getPersonInfo method has been overridden and it identifies if the person is male or female.\r\n\r\n#### Exercises\r\n\r\n##### Exercises Level 1\r\n\r\n1. Create an Animal class. The class will have name, age, color, legs properties and create different methods\r\n2. Create a Dog and Cat child class from the Animal Class.\r\n\r\n##### Exercises Level 2\r\n\r\n1. Override the method you create in Animal class\r\n\r\n##### Exercises Level 3\r\n\r\n1. Let's try to develop a program which calculate measure of central tendency of a sample(mean, median, mode) and measure of variability(range, variance, standard deviation). In addition to those measures find the min, max, count, percentile, and frequency distribution of the sample. You can create a class called Statistics and create all the functions which do statistical calculations as method for the Statistics class. Check the output below.\r\n\r\n```JS\r\nages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26]\r\n\r\nconsole.log('Count:', statistics.count()) // 25\r\nconsole.log('Sum: ', statistics.sum()) // 744\r\nconsole.log('Min: ', statistics.min()) // 24\r\nconsole.log('Max: ', statistics.max()) // 38\r\nconsole.log('Range: ', statistics.range() // 14\r\nconsole.log('Mean: ', statistics.mean()) // 30\r\nconsole.log('Median: ',statistics.median()) // 29\r\nconsole.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5}\r\nconsole.log('Variance: ',statistics.var()) // 17.5\r\nconsole.log('Standard Deviation: ', statistics.std()) // 4.2\r\nconsole.log('Variance: ',statistics.var()) // 17.5\r\nconsole.log('Frequency Distribution: ',statistics.freqDist()) // [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]\r\n```\r\n\r\n```sh\r\n// you output should look like this\r\nconsole.log(statistics.describe())\r\nCount: 25\r\nSum: 744\r\nMin: 24\r\nMax: 38\r\nRange: 14\r\nMean: 30\r\nMedian: 29\r\nMode: (26, 5)\r\nVariance: 17.5\r\nStandard Deviation: 4.2\r\nFrequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]\r\n```\r\n\r\n### 13 Document Object Model(DOM)\r\n\r\nHTML document is structured as a JavaScript Object. Every HTML element has a different properties which can help us to manipulate it. It is possible to get, create, append or remove HTML elements using JavaScript.\r\n\r\nWhen it comes to React we do not directly manipulate the DOM instead React Virtual DOM will take care of update all necessary changes.\r\n\r\nSo do not directly manipulate the DOM if you are using react. The only place we directly touch the DOM is here at the index.html. React is a single page application because all the components will be rendered on the index.html page and there will not be any other HTML in the entire React Application. You don't have to know DOM very well to use react but recommended to know.\r\n\r\n```html\r\n\r\n\r\n \r\n \r\n \r\n React App\r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n\r\n```\r\n\r\nCheck out there result on [codepen](https://codepen.io/Asabeneh/full/vYGqQxP)\r\n\r\n🌕 You are amazing! You have just completed day 1 challenge and you are on your way to greatness. Now you are a JavaScript Ninja and ready to dive into React.\r\n\r\n🎉 CONGRATULATIONS ! 🎉\r\n\r\n[<< Day 0](../readMe.md) | [Day 2 >>](../02_Day_Introduction_to_React/02_introduction_to_react.md)\r\n" }, { "path": "02_Day_Introduction_to_React/02_introduction_to_react.md", "content": "
\n

30 Days Of React: Getting Started React

\n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
\n October, 2020\n\n\n
\n\n[<< Day 1](../01_Day_JavaScript_Refresher/01_javascript_refresher.md) | [Day 3 >>](../03_Day_Setting_Up/03_setting_up.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_2.jpg)\n\n- [Getting Started React](#getting-started-react)\n - [1. What is React?](#1-what-is-react)\n - [2. Why React?](#2-why-react)\n - [React vs Vue popularity in October 2020](#react-vs-vue-popularity-in-october-2020)\n - [React vs Vue popularity in February 2020](#react-vs-vue-popularity-in-february-2020)\n - [3. JSX](#3-jsx)\n - [JSX Element](#jsx-element)\n - [Commenting a JSX element](#commenting-a-jsx-element)\n - [Rendering a JSX Element](#rendering-a-jsx-element)\n - [Style and className in JSX](#style-and-classname-in-jsx)\n - [Injecting data to a JSX Element](#injecting-data-to-a-jsx-element)\n - [Injecting a string to a JSX Element](#injecting-a-string-to-a-jsx-element)\n - [Injecting a number to a JSX Element](#injecting-a-number-to-a-jsx-element)\n - [Injecting an array to a JSX Element](#injecting-an-array-to-a-jsx-element)\n - [Injecting an object to a JSX Element](#injecting-an-object-to-a-jsx-element)\n - [Exercises](#exercises)\n - [Exercises: What is React?](#exercises-what-is-react)\n - [Exercises: Why React?](#exercises-why-react)\n - [Exercises: JSX](#exercises-jsx)\n - [Exercises: JSX Elements](#exercises-jsx-elements)\n - [Exercises: Inline Style](#exercises-inline-style)\n - [Exercises: Internal Styles](#exercises-internal-styles)\n - [Exercise: Inject data to JSX](#exercise-inject-data-to-jsx)\n\n## Getting Started React\n\nThis section covers prerequisites to get started with React. You should have a good understanding of the following technologies:\n\n- HTML\n- CSS\n- JavaScript\n\nIf you have the skills mentioned above, you will enjoy doing React. The 30 Days Of React challenge contains everything you need to know about react. In every section, it has some exercises and mini-projects, and it is recommended to work on them. This 30 Days Of React challenge will help you learn the latest version of React and the old version, step by step. The topics are broken down into 30 days, where each day contains several topics with easy-to-understand explanations, real-world examples and many hands-on exercises.\nThis challenge is designed for beginners and professionals who want to build a web application using React and JavaScript.\nOnce in a while you may need different dummy data to work with React. You can use the following [dummy data generator](https://www.30daysofreact.com/dummy-data) to generate different data.\n\n### 1. What is React?\n\nReact is a JavaScript library for building a reusable user interface(UI). It was initially released on May 29, 2013. The current version is 16.13.1 and somehow it is stable. React was created by Facebook. React makes creating UI components very easy. The official React documentation can be found [here](https://reactjs.org/docs/getting-started.html). When we work with React we do not interact directly with the DOM. React has its own way to handle the DOM(Document Object Model) manipulation. React uses its virtual DOM to make new changes and it updates only the element, that needs changing. Do not directly interact with DOM when you build a React Application and leave the DOM manipulation job for the React virtual DOM. In this challenge, we will develop 10-15 web applications using React. A web application, or a website, is made of buttons, links, forms with different input fields, header, footer, sections, articles, texts, images, audios, videos and boxes with different shapes. We use react to make a reusable UI components of a website.\n\nTo summarize:\n\n- React was released in May 2013\n- React was created by Facebook\n- React is a JavaScript library for building user interfaces\n- React is used to build single page applications - An application which has only one HTML page.\n- React allows us to create reusable UI components\n- React latest release is 16.13.1\n- [React versions](https://reactjs.org/versions/)\n- React official documentation can be found [here](https://reactjs.org/docs/getting-started.html)\n\n### 2. Why React?\n\nReact is one of the most popular JavaScript libraries. Many developers and companies have been using it for the last couple of years. Its popularity has been growing fast and it has a huge community. How do we measure popularity? One measure of popularity could be GitHub repository stars, watchers and forks. Let us compare the popularity of [React](https://github.com/facebook/react) and [Vue](https://github.com/vuejs/vue). As of today, the popularity between the two most popular JavaScript looks like as shown on the diagram. From the diagram, you can speculate the most popular JavaScript library. You may look at the number of watchers, stars and forks for both React and Vue. These alone will not be a very good measure of popularity, but still it tells a little bit about the popularity of the two technologies. If I have to recommend another JavaScript library next to React, it would be Vue.js.\n\n#### React vs Vue popularity in October 2020\n\nReact Official GitHub Repository\n\n![React Popularity October 2020](../images/react_repo_1_oct_2020.png)\n\nVue Official GitHub Repository\n\n![Vue Popularity October 2020](../images/vue_repo_1_oct_2020.png)\n\n#### React vs Vue popularity in February 2020\n\nReact Official GitHub Repository\n\n![React Popularity February 2020](../images/react_popularity.png)\n\nVue Official GitHub Repository\n\n![Vue Popularity February 2020](../images/vue_popularity.png)\n\nWhy we choose to use React ? We use it because of the following reasons:\n\n- fast\n- modular\n- scalable\n- flexible\n- big community and popular\n- open source\n- High job opportunity\n\n### 3. JSX\n\nJSX stands for JavaScript XML. JSX allows us to write HTML elements with JavaScript code. An HTML element has an opening and closing tags, content, and attribute in the opening tag. However, some HTML elements may not have content and a closing tag - they are self closing elements. To create HTML elements in React we do not use the _createElement()_ instead we just use JSX elements. Therefore, JSX makes it easier to write and add HTML elements in React. JSX will be converted to JavaScript on browser using a transpiler - [babel.js](https://babeljs.io/). Babel is a library which transpiles JSX to pure JavaScript and latest JavaScript to older version. See the JSX code below.\n\n```js\n// JSX syntax\n// we don't need to use quotes with JSX\n\nconst jsxElement =

I am a JSX element

\nconst welcome =

Welcome to 30 Days of React Challenge

\nconst data = Oct 2, 2020\n```\n\nThe above strange looking code seems like JavaScript and it seems like , but it is not JavaScript and it seems like HTML but not completely an HTML element. It is a mix of JavaScript and an HTML elements. JSX can allow us to use HTML in JavaScript. The HTML element in the JSX above is _h1_ and _small_.\n\n#### JSX Element\n\nAs you have seen in the example above, JSX has a JavaScript and HTML like syntax. JSX element could be a single HTML element or many HTML elements wrapped in a parent HTML element.\n\nThis JSX element has only one HTML element which is _h1_.\n\n```js\nconst jsxElement =

I am a JSX element

// JS with HTML\n```\n\nLet's make more JSX elements by declaring a new variable named title and content inside _h2_.\n\n```js\nconst title =

Getting Started React

\n```\n\nLet us add a subtitles and other contents to this JSX element by adding additional HTML elements. Every HTML element should be wrapped by an outer HTML element to create a valid JSX element. The name title variable also should be changed to header because our JSX element is containing almost all of the header of the application.\n\n```js\nconst header = (\n
\n

Welcome to 30 Days Of React

\n

Getting Started React

\n

JavaScript Library

\n
\n)\n```\n\nLet us keep adding more elements. Additional HTML elements to display the author name and year.\n\n```js\nconst header = (\n
\n

Welcome to 30 Days Of React

\n

Getting Started React

\n

JavaScript Library

\n

Asabeneh Yetayeh

\n Oct 2, 2020\n
\n)\n```\n\nAs you can see the _header_ element is a parent element for all the inner HTML elements and JSX must be wrapped by an outer parent element. Without the _header_ HTML element or other parent HTML element the above JSX is invalid.\n\n#### Commenting a JSX element\n\nWe comment codes for different reasons and it is also good to know how to comment out JSX elements in React.\n\n```js\n{\n /*\n
\n

Welcome to 30 Days Of React

\n

Getting Started React

\n

JavaScript Library

\n

Asabeneh Yetayeh

\n Oct 2, 2020\n
\n\n*/\n}\n```\n\n#### Rendering a JSX Element\n\nTo render a JSX element to HTML document, we should first create an index HTML. The index.html is the only HTML file you will have in any React Application. That is why we say that every React Application is a single page application. Let us create an index.html file. We can get started with React in two ways - either by using CDN or create-react-app. The create-react-app creates a React project boilerplate outbox and because of that, many people do have a hard time to understand how React works. In order to make things clear for absolute beginners I would like to start with a CDN. We use CDN only in this section and we will use the create-reap-app in the rest of the challenge and I also recommend you to use only create-react-app all the time.\n\n```html\n\n\n \n \n \n 30 Days Of React Challenge\n \n\n \n
\n\n \n \n\n```\n\nAs you can see from the above index.html, we have one div with a class root and script. The root _div_ is the gateway to connect all react components to the index.html. In the script tag we will write our JavaScript, but the script _type_ will be _babel_. Babel will _transpile_ the react JSX to pure JavaScript on the browser. Let us add babel to the script. Inside the babel, we can write any pure JavaScript, JSX and in general any React code.\n\n```html\n\n\n \n \n \n 30 Days Of React Challenge\n \n\n \n
\n \n \n \n\n```\n\nThe babel library is linked to our document and now we can make use of it. The next step is importing _React_ and _ReactDOM_ using CDN or link. In order to link React and ReactDOM, we attach both packages from CDN to the body of index.html. To test if React is linked to the index.html, try to check it by doing console.log(React). Open the browser console and you should get an object. If you see an object containing React methods then you managed to link your project with React CDN and you are ready to use React.\n\n```html\n\n\n \n \n \n 30 Days Of React Challenge\n \n\n \n
\n\n \n \n \n \n \n\n```\n\nNow the index.html has everything we need to write React code. Let us get the root element using document.querySelect('.root') and assign it to a variable name rootElement. The is the only place we directly interact with DOM.\n\nNow, you knew JSX and JSX element. Let us render the JSX element on the browser, in order to do so we need the React and ReactDOM library. In addition to the React and ReactDOM we need babel to transpile the JSX to JavaScript code. The ReactDOM package has a method render. The render method takes two arguments:a JSX element or a component and the root document. See the code below. [Live on code pen](https://codepen.io/Asabeneh/full/JjdbjqK).\n\n```html\n\n\n \n \n \n 30 Days Of React Challenge\n \n\n \n
\n\n \n \n \n \n \n\n```\n\n![Rendering JSX](../images/rendering_jsx.png)\n\nLet us render more content. To render more content, the JSX element should have more HTML elements. For instance, we can create a header of a website and header may have a title, subtitle, author or date etc. Remember, we can render only one JSX element at a time.\n[Live on code pen](https://codepen.io/Asabeneh/full/QWbGWeY).\n\n```html\n\n\n \n \n \n 30 Days Of React Challenge\n \n\n \n
\n\n \n \n \n \n \n\n```\n\n![Rendering more content](../images/rendering_more_jsx_content_.png)\n\nWe have created a JSX element for the header of the website. How about the main and the footer for the website? Similar to the header, let us create a JSX element for the main and the footer.\n\nJSX element for the main part of the website.\n\n```js\n// JSX element\nconst main = (\n
\n

Prerequisite to get started react.js:

\n
    \n
  • HTML
    • \n
  • CSS
    • \n
  • JavaScript
    • \n
\n
\n)\n```\n\nJSX element for the footer part of the website.\n\n```js\n// JSX element\nconst footer = (\n
\n

Copyright 2020

\n
\n)\n```\n\nNow, we have three JSX elements: the header, main and footer. The best way to render all of the three JSX elements is by wrapping them all in a parent JSX element or putting them in an array. To include JSX element inside another JSX element we use the curly bracket, {} and call the name of the JSX inside the curly bracket.\n\n```js\n// JSX element for the header part of the website\nconst header = (\n
\n

Welcome to 30 Days Of React

\n

Getting Started React

\n

JavaScript Library

\n

Asabeneh Yetayeh

\n Oct 2, 2020\n
\n)\n\n// JSX element for the main part of the website\nconst main = (\n
\n

Prerequisite to get started react.js:

\n
    \n
  • HTML
    • \n
  • CSS
    • \n
  • JavaScript
    • \n
\n
\n)\n\n// JSX element for the footer part of the website\nconst footer = (\n
\n

Copyright 2020

\n
\n)\n\n// JSX element which contain all, it is a container or parent\nconst app = (\n
\n {header}\n {main}\n {footer}\n
\n)\n```\n\nNow, let us put everything together and render it to the browser. [Live on code pen](https://codepen.io/Asabeneh/full/MWwbYWg).\n\n```html\n\n\n \n \n \n 30 Days Of React Challenge\n \n\n \n
\n\n \n \n \n \n \n\n```\n\n![Rendering Multiple JSX Elements](../images/rendering_multiple_jsx_elements.png)\n\nLet us apply some style to our JSX elements and see the result.\n\n![Styling JSX Element](../images/styling_jsx_element.png).\n\nNow, lets us apply style the header part only [Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYBG).\n\n#### Style and className in JSX\n\nSo far, we did not apply any style in the JSX elements. Now, let us add style to our JSX elements. Inline style became very popular after the emergence of react. Let us add border to the header JSX element.\n\nTo add style to a JSX element we use inline style or className. We inject the style object using {}. Every CSS property becomes a key and every CSS property value becomes a value for the the object. For instance, in the example below, border is a key and '2px solid orange' is a value, color is a key and 'black' is a value, fontSize is a key and '18px' is a value. All two word CSS properties will change to camelCase when we use them as key in the CSS object in React or JavaScript.[Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYbY).\n\n```js\nconst header = (\n \n

Welcome to 30 Days Of React

\n

Getting Started React

\n

JavaScript Library

\n

Asabeneh Yetayeh

\n Oct 2, 2020\n \n)\n\n// or we can write it this way\n\nconst style = { border: '2px solid orange', color: 'black', fontSize: '18px' }\n\nconst header = (\n
\n

Welcome to 30 Days Of React

\n

Getting Started React

\n

JavaScript Library

\n

Asabeneh Yetayeh

\n Oct 2, 2020\n
\n)\n```\n\nIt is good practice to open the browser console while you are developing your application to know, if everything goes well.\n\nLet us keep styling all the JSX elements we have created: the header, main and the footer. We can also use regular internal styling to style our application. Using regular style, to target an HTML element we use tag name, id, class, an attribute and other methods. It is very common in the React developer community - people use classes quite a lot instead of id. In this material, I will use only class instead of id.\n\nIn JSX element we write className instead of class because class is a reserved word in JavaScript. Similar to className, htmlFor instead of for in label tag. See the example below.\n\n```js\nconst title =

Getting Started React

\nconst inputField = (\n
\n \n \n
\n)\n```\n\nThe id used in the input element is not for styling purpose, instead to refer the label to the input field.\n\nIf class is used instead of className or for instead of htmlFor you will see such kind of warning.\n\n![Class Name warning](../images/className_warning.png)\n\nNow, you know how to use the inline style and how to use className. Let us style all the JSX elements.\n\n```html\n\n\n \n \n \n 30 Days Of React Challenge\n \n\n \n
\n\n \n \n \n \n \n\n```\n\n![Styling all JSX elements](../images/styling_all_jsx_elements.png)\n\nInstead of style object using regular styling method is more easy than the one above. Now, let us use internal style to style all the JSX. It is also possible to use external styling method. [Live on code pen](https://codepen.io/Asabeneh/full/QWbGwge)\n\n```html\n\n\n \n \n \n \n\n 30 Days Of React Challenge\n \n \n\n \n
\n\n \n \n \n \n \n\n```\n\n![Internal Style](../images/internal_style.png)\n\n#### Injecting data to a JSX Element\n\nSo far, we used static data on the JSX elements, but we can also pass different data types as a dynamic data. The dynamic data could be string, number, boolean, array or object. Let us see each of the data types step by step. To inject data to a JSX we use the {} bracket.\n\n```js\nconst welcome = 'Welcome to 30 Days Of React'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst authorFirstName = 'Asabeneh'\nconst authorLastName = 'Yetayeh'\nconst date = 'Oct 1, 2020'\n\n// JSX element, header\nconst header = (\n
\n
\n

{welcome}

\n

{title}

\n

{subtitle}

\n

\n Instructor: {authorFirstName} {authorLastName}\n

\n Date: {date}\n
\n
\n)\n```\n\nSimilar to the header JSX element, we can implement data injection to main and footer JSX elements.\n\n##### Injecting a string to a JSX Element\n\nIn this section we inject only strings\n\n```js\nconst welcome = 'Welcome to 30 Days Of React'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst firstName = 'Asabeneh'\nconst lastName = 'Yetayeh'\nconst date = 'Oct 2, 2020'\n\n// JSX element, header\n\n// JSX element, header\nconst header = (\n
\n
\n

{welcome}

\n

{title}

\n

{subtitle}

\n

\n Instructor: {firstName} {lastName}\n

\n Date: {date}\n
\n
\n)\n```\n\n##### Injecting a number to a JSX Element\n\n```js\nconst numOne = 3\nconst numTwo = 2\n\nconst result = (\n

\n {numOne} + {numTwo} = {numOne + numTwo}\n

\n)\n\nconst yearBorn = 1820\nconst currentYear = new Date().getFullYear()\nconst age = currentYear - yearBorn\nconst personAge =

{age}

\n```\n\nAs you can see in the example above, it is possible to do some arithmetic calculations and ternary operations.\n\n##### Injecting an array to a JSX Element\n\nTo give an example for an array, let us change the HTML, CSS, JavaScript to an array and inject it to the main JSX element below. We will cover more in much detail later, in rendering lists section.\n\n```js\nconst techs = ['HTML', 'CSS', 'JavaScript']\n\n// JSX element, main\nconst main = (\n
\n
\n

\n Prerequisite to get started{' '}\n \n react.js\n \n :\n

\n
    {techs}
\n
\n
\n)\n```\n\n##### Injecting an object to a JSX Element\n\nWe can inject string, number, boolean, array data to JSX but we cannot directly inject an object. We should extract object values first or destructure the content of the object before we inject the data to the JSX element. For instance, let us write firstName and lastName inside an object and extract them to use them inside JSX.\n\nNow, let us put everything together. Here, in the example below, the data is injected dynamically to the JSX. [Live on code pen](https://codepen.io/Asabeneh/full/YzXWgpZ)\n\n```html\n\n\n \n \n \n \n\n 30 Days Of React Challenge\n \n \n\n \n
\n\n \n \n \n \n \n\n```\n\n![Dynamic Data](../images/dynamic_data.png)\n\nAs you can see the lists are all in one line. Therefore, we should format the list the way we want, before we inject it to JSX. In order to format the list, we should modify the array before we will inject it to JSX. We can modify the array using _map_. As a react developer you should have a very good understanding of functional programming(map, filter, reduce, find, some, every). If you don't have good understanding of functional programming, check out day 1.\n\n```js\nconst techs = ['HTML', 'CSS', 'JavaScript']\nconst techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n```\n\nIn the following code example, the list is now containing list elements and it is formatted properly.\n\n```html\n\n\n \n \n \n \n\n 30 Days Of React Challenge\n \n \n\n \n
    \n\n \n \n \n \n \n\n```\n\nRendering lists\n\n![List Id](../images/map_list_id.png)\nAs you can see above, now the lists are formatted properly, but there is a warning on the console, which says each list child should have a unique key. In the array, we do not have id, but it is common to pass id as a unique value, when you have id in your data. Now, let us just pass each item with a unique key to remove the warning.\n\n```html\n\n\n \n \n \n \n\n 30 Days Of React Challenge\n \n \n\n \n
    \n\n \n \n \n \n \n\n```\n\n![Removing the warning ](../images/removing_unique_id_warning.png)\n\nNow, you have a very good understanding of how to create JSX elements and also how to inject data to JSX. In the next section, we will talk about how to use create-react-app and components. Components are more powerful and useful than JSX.\n\n🌕 You are awesome. You have just completed day 2 challenges and you are two steps ahead on your way to greatness. Now do some exercises for your brain and for your muscle.\n\n### Exercises\n\n#### Exercises: What is React?\n\n1. What is React?\n2. What is a library?\n3. What is a single page application?\n4. What is a component ?\n5. What is the latest version of React?\n6. What is DOM?\n7. What is React Virtual DOM?\n8. What does a web application or a website(composed of) have?\n\n#### Exercises: Why React?\n\n1. Why did you chose to use react?\n2. What measures do you use to know popularity ?\n3. What is more popular, React or Vue ?\n\n#### Exercises: JSX\n\n1. What is an HTML element?\n2. How to write a self closing HTML element?\n3. What is an HTML attribute? Write some of them\n4. What is JSX?\n5. What is babel?\n6. What is a transpiler?\n\n#### Exercises: JSX Elements\n\n1. What is a JSX element?\n2. Write your name in a JSX element and store it in a name variable\n3. Write a JSX element which displays your full name, country, title, gender, email, phone number. Use h1 for the name and p for the rest of the information and store it in a user variable\n4. Write a footer JSX element\n\n#### Exercises: Inline Style\n\n1. Create a style object for the main JSX\n2. Create a style object for the footer and app JSX\n3. Add more styles to the JSX elements\n\n#### Exercises: Internal Styles\n\n1. Apply different styles to your JSX elements\n\n#### Exercise: Inject data to JSX\n\n1. Practice how to make JSX element and injecting dynamic data(string, number, boolean, array, object)\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 1](../01_Day_JavaScript_Refresher/01_javascript_refresher.md) | [Day 3 >>](../03_Day_Setting_Up/03_setting_up.md)\n" }, { "path": "03_Day_Setting_Up/03_setting_up.md", "content": "
    \n

    30 Days Of React: Setting Up

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n\n[<< Day 2](../02_Day_Introduction_to_React/02_introduction_to_react.md) | [Day 4 >>](../04_Day_Components/04_components.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_3.jpg)\n\n- [Setting Up](#setting-up)\n - [Node](#node)\n - [Module](#module)\n - [Package](#package)\n - [Node Package Manager(NPM)](#node-package-managernpm)\n - [Visual Studio Code](#visual-studio-code)\n - [Browser](#browser)\n - [Visual Studio Extensions](#visual-studio-extensions)\n - [Create React App](#create-react-app)\n- [Your first React App](#your-first-react-app)\n - [React Boilerplate](#react-boilerplate)\n - [Styles in JSX](#styles-in-jsx)\n - [Injecting data to JSX elements](#injecting-data-to-jsx-elements)\n - [Importing Media Objects in React](#importing-media-objects-in-react)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Setting Up\n\nIn the previous section, we learned about JSX and we accessed the React and ReactDOM package using CDN. However, in real projects instead of CDN you will use the create-react-app package to generate a React project starter(boilerplate). The initial _create-react-app_ was released on Jul 22, 2016. Before this time, developers used to configure webpack with a JavaScript module bundler, babel and all the necessary packages manually and this used to take half an hour or maybe more. Now, create-react-app will take care of everything and you will be in charge of only developing the product, instead of spending too much time configuring and setting up projects. Before we start using different tools, let's have a brief introduction to all the tools we are going to use in this challenge. You do not have to understand everything, but I will try to give a very short introduction to some of the tools and technologies that we use when we work with React.\n\n## Node\n\nNode is a JavaScript runtime environment that allows JavaScript to run on the server. Node was created in 2009. Node has played a great role for the growth of JavaScript. The React application starts by default at localhost 3000. The create-react-app has configured a node server for the React Application. That is why we need node and node modules. We will see create-react-app soon.\n\nIf you do not have node, install it. Install [node.js](https://nodejs.org/en/).\n\n![Node download](../images/download_node.png)\n\nAfter downloading double click and install\n\n![Install node](../images/install_node.png)\n\nWe can check if node is installed on our local machine, by opening our device terminal or command prompt, and writing the following command:\n\n```sh\nasabeneh $ node -v\nv12.18.0\n```\n\n## Module\n\nA single or multiple functions, that can be exported and imported when needed, can be included in a project.\nIn React we do not use link to access modules or packages, instead we import the module. Let's see how to import and export a module or modules:\n\n```js\n// math.js\nexport const addTwo = (a, b) => a + b\nexport const multiply = (a, b) => a * b\nexport const subtract = (a, b) => a - b\n\nexport default (function doSomeMath() {\n return {\n addTwo,\n multiply,\n subtract,\n }\n})()\n```\n\nNow let's import the _math.js_ modules to a different file:\n\n```js\n// index.js\n// to import the doSomeMath from the math.js with or without extension\nimport doSomeMath from './math.js'\n\n// to import the other modules\n// since these modules were not exported as default we have to desctructure\nimport { addTwo, multiply, subtract } from './math.js'\n\nimport * as everything from './math.js' // to import everything remaining\nconsole.log(addTwo(5, 5))\nconsole.log(doSomeMath.addTwo(5, 5))\nconsole.log(everything)\n```\n\nAfter this, when you see _import React from 'react'_ or _import ReactDOM from 'react-dom'_ you will not be surprised.\n\n## Package\n\nA Package is a module or a collection of modules. For instance, React, ReactDOM are packages.\n\n## Node Package Manager(NPM)\n\nNPM was created in 2010. You do not need to install NPM separately - when you install node you will have also NPM. NPM is a default package manager for Node.js. It allows users to consume and distribute JavaScript modules that are available in the registry. NPM allows to create packages, use packages and distribute packages. NMP also played quite a big role in the growth of JavaScript. Currently, there is more than 350,000 packages in the NPM registry. Let's see the create-react-app on NPM registry. The number of downloads show the popularity of the package.\n\n![NPM create-react-app](../images/npm_registry.png)\n\n## Visual Studio Code\n\nWe will use Visual Studio Code as a code editor. [Download](https://code.visualstudio.com) and install it if you do not have one yet.\n\n## Browser\n\nWe will use Google Chrome\n\n## Visual Studio Extensions\n\nYou may need to install these extensions from Visual Studio Code\n\n- Prettier\n- ESLint\n- Bracket Pair Colorizer\n- ES7 React/Redux/GraphQL/React-Native snippets\n\n## Create React App\n\nTo create a react project you can use one of the following ways. Let's assume you installed node. Open the command line interface (CLI), git bash or terminal on Mac or Linux. Then run the following command. I am using git bash.\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop\n$ npx create-react-app name-of-your-project\n```\n\nIf you do not like to write npx every time you create a project you may install create-react-app package globally in your computer using the following command.\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop\n$ npm install -g create-react-app\n```\n\nAfter you installed create-react-app, you create a React application as follows:\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop\n$ create-react-app name-of-project\n```\n\n# Your first React App\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~\n\\$ cd Desktop/\n```\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop\n\\$ npx create-react-app 30-days-of-react\n```\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop\n\\$ cd 30-days-of-react/\n```\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)\n\\$ npm start\n```\n\nNow your React app should run at localhost 3000. Go to the App.js and modify the content by writing some text, you will see the latest changes on the browser.\nTo stop the server, press Ctr + C in the CLI.\n\n![React Starting](../images/react_app_starting.png)\n\n## React Boilerplate\n\nLet's see the React boilerplate, which has been created by create-react-app. Whenever you create a new project, you run create-react-app and name of the project.\n\nIn the following React boilerplate, there are three folders: node_modules, public and src. In addition, there are .gitignore, README.md, package.json and yarn.lock. Some of you, instead of yarn.lock, you may have package-lock.json.\n\nIt is good to know these folders and files.\n\n- node_modules - stores all the necessary node packages of the React applications.\n\n- Public\n\n - index.html - the only HTML file we have in the entire application\n\n - favicon.ico - an icon file\n - manifest.json - is used to make the application a progressive web app\n - other images - open graph images(open graph images are images which are visible when a link share on social media)\n - robots.txt - information, if the website allows web scraping\n\n- src\n\n - App.css, index.css - are different CSS files\n - index.js - a file which allows to connect all the components with index.html\n - App.js - A file where we usually import most of the presentational components\n - serviceWorker.js: is used to add progressive web app features\n - setupTests.js - to write testing cases\n\n- package.json- List of packages the applications uses\n- .gitignore - React boilerplate comes with git initiated, and the .gitingore allows files and folders not to be pushed to GitHub\n- README.md - Markdown file to write documentation\n- yarn.lock or package-lock.json - a means to lock the version of the package\n\n![React Boilerplate](../images/react_boilerplate.png)\n\nNow lets remove all the files, which we do not need at the moment, and leave only the files we need right now.\n\nAfter removing most of the files, the structure of the boilerplate looks like this:\n\n![React Boilerplate Cleaned](../images/react_bolier_plate_cleaned.png)\n\nNow lets write code on index.js. First of, we should import React and ReactDOM. React allows us to write JSX and ReactDOM to render the JSX on the DOM. ReactDOM has a render method. Let's use all the JSX elements we created on Day 2. The ReactDOM render method takes two parameters, a JSX or a component and the root.\n\n```js\n//index.js\n// importing the react and react-dom package\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst jsxElement =

    This is a JSX element

    \nconst rootElement = document.getElementById('root')\n\nReactDOM.render(jsxElement, rootElement)\n```\n\n```html\n\n\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n
    \n \n\n```\n\nIf your application is not running, go to your project folder and run the following command\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)\n\\$ npm start\n```\n\nIf you do not have any bugs, your React app will be launched on the browser.\n\n![JSX using create react app](../images/jsx_use_create_react_app.png)\n\nLet's write more JSX elements and render them on the browser. This expression is a JSX element which is made of h2 HTML element.\n\n```js\nconst title =

    Getting Started React

    \n```\n\nLet's add more content to the previous JSX and change the name to header.\n\n```js\nconst header = (\n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n
    \n)\n```\n\nLet's render this to the browser, in order to do so, we need ReactDOM.\n\n```js\n//index.js\n// importing the react and react-dom package\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst header = (\n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 2, 2020\n
    \n)\nconst rootElement = document.getElementById('root')\n\nReactDOM.render(header, rootElement)\n```\n\n![JSX using create react app](../images/rendering_more_jsx_content_create_react_app.png)\n\nNow, lets add all the JSX we created on Day 2.\n\n```js\n//index.js\n// importing the react and react-dom package\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// JSX element, header\nconst header = (\n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 2, 2020\n
    \n)\n\n// JSX element, main\nconst main = (\n
    \n

    Prerequisite to get started react.js:

    \n
      \n
    • HTML
      • \n
    • CSS
      • \n
    • JavaScript
      • \n
    \n
    \n)\n\n// JSX element, footer\nconst footer = (\n
    \n

    Copyright 2020

    \n
    \n)\n\n// JSX element, app, a container or a parent\nconst app = (\n
    \n {header}\n {main}\n {footer}\n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\n// ReactDOM has the render method and the render method takes two argument\nReactDOM.render(app, rootElement)\n// or\n// ReactDOM.render([header, main, footer], rootElement)\n```\n\n![JSX using create react app to render more jsx](../images/rendering_multiple_jsx_elements_create-react_app.png)\n\n## Styles in JSX\n\nLet's apply style to the JSX elements. We can style JSX either using inline, internal or external CSS styles. Now, let's apply inline styles to each JSX element.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst headerStyles = {\n backgroundColor: '#61DBFB',\n fontFamily: 'Helvetica Neue',\n padding: 25,\n lineHeight: 1.5,\n}\n\n// JSX element, header\nconst header = (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 2, 2020\n
    \n
    \n)\n\n// JSX element, main\nconst mainStyles = {\n backgroundColor: '#F3F0F5',\n}\nconst main = (\n
    \n

    Prerequisite to get started react.js:

    \n
      \n
    • HTML
      • \n
    • CSS
      • \n
    • JavaScript
      • \n
    \n
    \n)\n\nconst footerStyles = {\n backgroundColor: '#61DBFB',\n}\n// JSX element, footer\nconst footer = (\n
    \n

    Copyright 2020

    \n
    \n)\n\n// JSX element, app\nconst app = (\n
    \n {header}\n {main}\n {footer}\n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(app, rootElement)\n```\n\n![Inline styling JSX](../images/styling_jsx_inline_create_react_app.png)\n\nNow, lets apply an internal style, we put all the CSS in the header of the index.html.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n// JSX element, header\nconst header = (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Instructor: Asabeneh Yetayeh

    \n Date: Oct 1, 2020\n
    \n
    \n)\n\n// JSX element, main\nconst main = (\n
    \n
    \n

    \n Prerequisite to get started{' '}\n \n react.js\n \n :\n

    \n
      \n
    • HTML
      • \n
    • CSS
      • \n
    • JavaScript
      • \n
    \n
    \n
    \n)\n\n// JSX element, footer\nconst footer = (\n
    \n
    \n

    Copyright 2020

    \n
    \n
    \n)\n\n// JSX element, app\nconst app = (\n
    \n {header}\n {main}\n {footer}\n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(app, rootElement)\n```\n\n![Inline styling JSX](../images/js_internal_style_create_react_app.png)\n\n## Injecting data to JSX elements\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n// To get the root element from the HTML document\n\n// JSX element, header\nconst welcome = 'Welcome to 30 Days Of React'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst author = {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n}\nconst date = 'Oct 2, 2020'\n\n// JSX element, header\nconst header = (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n Instructor: {author.firstName} {author.lastName}\n

    \n Date: {date}\n
    \n
    \n)\n\nconst numOne = 3\nconst numTwo = 2\n\nconst result = (\n

    \n {numOne} + {numTwo} = {numOne + numTwo}\n

    \n)\n\nconst yearBorn = 1820\nconst currentYear = new Date().getFullYear()\nconst age = currentYear - yearBorn\nconst personAge = (\n

    \n {' '}\n {author.firstName} {author.lastName} is {age} years old\n

    \n)\n\n// JSX element, main\nconst techs = ['HTML', 'CSS', 'JavaScript']\nconst techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n\n// JSX element, main\nconst main = (\n
    \n
    \n

    \n Prerequisite to get started{' '}\n \n react.js\n \n :\n

    \n
      {techsFormatted}
    \n {result}\n {personAge}\n
    \n
    \n)\n\nconst copyRight = 'Copyright 2020'\n\n// JSX element, footer\nconst footer = (\n
    \n
    \n

    {copyRight}

    \n
    \n
    \n)\n\n// JSX element, app\nconst app = (\n
    \n {header}\n {main}\n {footer}\n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(app, rootElement)\n```\n\n![Inline styling JSX](../images/inecting_data_to_jsx_create_react_app.png)\n\n## Importing Media Objects in React\n\nHow do we import images, video and audio in React? Let's see how we import images first.\nCreate images folder in the src folder and save an image inside. For instance let's save asabeneh.jpg image and let's import this image to index.js. After importing we will inject it to a JSX expression, user. See the code below.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\nconst user = (\n
    \n asabeneh image\n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(user, rootElement)\n```\n\n![Rendering image](../images/rendering_image.png)\n\nLet's inject the user inside the main JSX element and see the result:\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n// To get the root element from the HTML document\nimport asabenehImage from './images/asabeneh.jpg'\n// JSX element, header\nconst welcome = 'Welcome to 30 Days Of React'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst author = {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n}\nconst date = 'Oct 2, 2020'\n\n// JSX element, header\nconst header = (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n Instructor: {author.firstName} {author.lastName}\n

    \n Date: {date}\n
    \n
    \n)\n\nconst numOne = 3\nconst numTwo = 2\n\nconst result = (\n

    \n {numOne} + {numTwo} = {numOne + numTwo}\n

    \n)\n\nconst yearBorn = 1820\nconst currentYear = new Date().getFullYear()\nconst age = currentYear - yearBorn\nconst personAge = (\n

    \n {' '}\n {author.firstName} {author.lastName} is {age} years old\n

    \n)\n\n// JSX element, main\nconst techs = ['HTML', 'CSS', 'JavaScript']\nconst techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n\nconst user = (\n
    \n asabeneh image\n
    \n)\n\n// JSX element, main\nconst main = (\n
    \n
    \n

    \n Prerequisite to get started{' '}\n \n react.js\n \n :\n

    \n
      {techsFormatted}
    \n {result}\n {personAge}\n {user}\n
    \n
    \n)\n\nconst copyRight = 'Copyright 2020'\n\n// JSX element, footer\nconst footer = (\n
    \n
    \n

    {copyRight}

    \n
    \n
    \n)\n\n// JSX element, app\nconst app = (\n
    \n {header}\n {main}\n {footer}\n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(app, rootElement)\n```\n\n![All JSX together final](../images/all_jsx_final.png)\n\nThe boilerplate code can be found [here](../03/../03_Day_Setting_Up/30-days-of-react_boilerplate)\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is a module?\n2. What is package?\n3. What is the difference between a module and a package.\n4. What is NPM?\n5. What is Webpack?\n6. How do you create a new React project?\n7. What are the files and folders inside a project folder(package.json, package-lock.json or yarn.lock, .gitignore,node_modules and public)?\n8. What is your favorite code editor (I believe that it is Visual Studio Code)?\n9. Add different Visual Studio Code extensions to improve your productivity(eg. prettier, ESLint etc).\n10. Try to make a different custom module in a different file and import it to index.js.\n\n## Exercises: Level 2\n\n1. Import and render the following images\n ![Front end](../images/frontend_technologies.png)\n\n2. Use h1, p, input and button HTML elements to create the following design using JSX\n\n![News Letter](../images/news_letter_design.png)\n\n## Exercises: Level 3\n\n1. Design the following user card.\n\n![User Card](../images/user_card_design_jsx.png)\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 2](../02_Day_Introduction_to_React/02_introduction_to_react.md) | [Day 4 >>](../04_Day_Components/04_components.md)\n" }, { "path": "03_Day_Setting_Up/03_setting_up_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "03_Day_Setting_Up/03_setting_up_boilerplate/README.md", "content": "# 30 Days of React App: Day 3\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "03_Day_Setting_Up/03_setting_up_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "03_Day_Setting_Up/03_setting_up_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n
    \n \n\n" }, { "path": "03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js", "content": "// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n// To get the root element from the HTML document\nimport asabenehImage from './images/asabeneh.jpg'\n\n// to import the doSomeMath from the math.js with or without extension\nimport doSomeMath from './math.js'\n\n// to import the other modules\n// since these modules were not exported as default we have to desctructure\nimport { addTwo, multiply, subtract } from './math.js'\n\nimport * as everything from './math.js'\nconsole.log(addTwo(5, 5))\nconsole.log(doSomeMath.addTwo(5, 5))\nconsole.log(everything)\n// JSX element, header\n\n\n// JSX element, header\nconst welcome = 'Welcome to 30 Days Of React'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst author = {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n}\nconst date = 'Oct 2, 2020'\n\n// JSX element, header\nconst header = (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n Instructor: {author.firstName} {author.lastName}\n

    \n Date: {date}\n
    \n
    \n)\n\nconst numOne = 3\nconst numTwo = 2\n\nconst result = (\n

    \n {numOne} + {numTwo} = {numOne + numTwo}\n

    \n)\n\nconst yearBorn = 1820\nconst currentYear = new Date().getFullYear()\nconst age = currentYear - yearBorn\nconst personAge = (\n

    \n {' '}\n {author.firstName} {author.lastName} is {age} years old\n

    \n)\n\n// JSX element, main\nconst techs = ['HTML', 'CSS', 'JavaScript']\nconst techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n\nconst user = (\n
    \n asabeneh image\n
    \n)\n\n// JSX element, main\nconst main = (\n
    \n
    \n

    \n Prerequisite to get started{' '}\n \n react.js\n \n :\n

    \n
      {techsFormatted}
    \n {result}\n {personAge}\n {user}\n
    \n
    \n)\n\nconst copyRight = 'Copyright 2020'\n\n// JSX element, footer\nconst footer = (\n
    \n
    \n

    {copyRight}

    \n
    \n
    \n)\n\n// JSX element, app\nconst app = (\n
    \n {header}\n {main}\n {footer}\n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(app, rootElement)\n" }, { "path": "03_Day_Setting_Up/03_setting_up_boilerplate/src/math.js", "content": "// math.js\nexport const addTwo = (a, b) => a + b\nexport const multiply = (a, b) => a * b\nexport const subtract = (a, b) => a - b\n\nexport default(function doSomeMath() {\n return {\n addTwo,\n multiply,\n subtract,\n }\n})()\n" }, { "path": "04_Day_Components/04_components.md", "content": "
    \n

    30 Days Of React: Components

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_setting_up.md) | [Day 5 >>](../05_Day_Props/05_props.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg)\n\n- [Components](#components)\n - [Big picture of components](#big-picture-of-components)\n - [JavaScript function](#javascript-function)\n - [JavaScript Class](#javascript-class)\n - [Creating React Component](#creating-react-component)\n - [Functional Component](#functional-component)\n - [Rendering components](#rendering-components)\n - [Injecting data to JSX in React Component](#injecting-data-to-jsx-in-react-component)\n - [Further on Functional components](#further-on-functional-components)\n- [Exercises: Components](#exercises-components)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Components\n\nA React component is a small, reusable code, which is responsible for one part of the application UI. A React application is an aggregation of components. React can help us to build reusable components. The following diagram shows different components. All the components have different border colors. In React we assemble different components together to create an application. We use JavaScript functions or classes to make components. If we use a function, the component will be a functional component, but if we use a class, the component will be a class-based component.\n\nComponents can be:\n\n- Functional Component / Presentational Component / Stateless Component / Dumb Component\n- Class Component / Container Component/ Statefull Component / Smart Component\n\nThe classification of components above does not work for the latest version of React, but it is good to know the former definition and how the previous versions work.\n\nSo, let us change all the JSX to components. Components in React are JavaScript functions or classes, that return a JSX. Component name must start with an uppercase, and if the name is two words, it should be CamelCase - a camel with two humps.\n\n## Big picture of components\n\nIn the previous section we agreed, that a website or an application is made of buttons, forms, texts, media objects, header, section, article and footer. If we have a million-dollar button, we can use this button all the time, instead of recreating it all over again, whenever we need a button. The same goes for input fields, forms, header or footer. That is where the power of the component comes. In the following diagram, the header, main and footer are components. Inside the main there is also a user card component and a text section component. All the different colors represent different components. How many colors do you see? Each color represent a single component. We have five components in this diagram.\n\n![Components](../images/components_example.png)\n\nBefore we jump into React components, let's do some functions and class refreshers.\n\n## JavaScript function\n\nA JavaScript function could be either a regular function or an arrow function. These functions are not exactly the same there is a slight difference between them.\n\n```js\nconst getUserInfo = (firstName, lastName, country, title, skills) => {\n return `${firstName} ${lastName}, a ${title} developer based in ${country}. He knows ${skills.join(\n ' '\n )} `\n}\n// When we call this function we need parameters\nconst skills = ['HTML', 'CSS', 'JS', 'React']\nconsole.log(\n getUserInfo('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer', skills)\n)\n```\n\n## JavaScript Class\n\nA class is a blueprint of an object. We instantiate a class to create different objects. In addition, we can create children, by inheriting all the methods and properties of the parent.\n\n```js\nclass Parent {\n constructor(firstName, lastName, country, title) {\n // we bind the params with this class object using this keyword\n this.firstName = firstName\n this.lastName = lastName\n this.country = country\n this.title = title\n }\n getPersonInfo() {\n return `${this.firstName} ${this.lastName}, a ${this.title} developer base in ${this.country} `\n }\n parentMethod() {\n // code goes here\n }\n}\n\nconst p1 = new Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer')\n\nclass Child extends Parent {\n constructor(firstName, lastName, country, title, skills) {\n super(firstName, lastName, country, title)\n this.skills = skills\n // we bind the child params with the this keyword to this child object\n }\n getSkills() {\n let len = this.skills.length\n return len > 0 ? this.skills.join(' ') : 'No skills found'\n }\n childMethod() {\n // code goes here\n }\n}\n\nconst skills = ['HTML', 'CSS', 'JS', 'React']\n\nconst child = new Child(\n 'Asabeneh',\n 'Yetayeh',\n 'Finland',\n 'FullStack Developer',\n skills\n)\n```\n\nWe just briefly covered function and class. React component is made of JavaScript functions or classes, so let's make a React component now.\n\n## Creating React Component\n\n### Functional Component\n\nUsing a JavaScript function, we can make a functional React component.\n\n```js\n// React component syntax\n// it can be arrow function, function declaration or function expression\nconst jsx = Content \nconst ComponentName = () => {\n return jsx\n}\n```\n\nThe following expression is a JSX element.\n\n```js\n// JSX element, header\nconst header = (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 3, 2020\n
    \n
    \n)\n\n// React Component\nconst Header = () => {\n return header\n}\n\n// or we can just return the JSX\n\nconst Header = () => {\n return (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 3, 2020\n
    \n
    \n )\n}\n\n// Even th above code can be written like this\n// Explicitly returning the JSX\nconst Header = () => (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 3, 2020\n
    \n
    \n)\n```\n\n### Rendering components\n\nNow, lets change all the JSX elements we had to components. When we call JSX element we use curly brackets and when we call components we do as follows . If we pass an attribute, when we call the component name, we call it props(). We will talk about props in another section.[Live on code pen](https://codepen.io/Asabeneh/full/wvaKKEM)\n\nLet's render first the _Header_ component.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Header Component\nconst Header = () => (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 3, 2020\n
    \n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(
    , rootElement)\n```\n\nNow, let's create an App component , that will wrap the Header, Main and Footer. Then the App component will be render on the DOM.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\n// Header Component\nconst Header = () => (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 3, 2020\n
    \n
    \n)\n\n// User Card Component\nconst UserCard = () => (\n
    \n asabeneh image\n

    Asabeneh Yetayeh

    \n
    \n)\n\n// TechList Component\nconst TechList = () => {\n const techs = ['HTML', 'CSS', 'JavaScript']\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n}\n\n// Main Component\nconst Main = () => (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n
    \n
    \n)\n\n// Footer Component\nconst Footer = () => (\n
    \n
    \n

    Copyright 2020

    \n
    \n
    \n)\n\n// The App, or the parent or the container component\nconst App = () => (\n
    \n
    \n
    \n
    \n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the App component using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\n![Rendering Components](../images/rendering_componnets.png)\n\n### Injecting data to JSX in React Component\n\nSo far, we used static data on the JSX elements. Now let's pass different data types as dynamic data. The dynamic data could be strings, numbers, booleans, arrays or objects. Let us see each of the data types step by step. To inject data to a JSX we use the {} bracket.\n\nIn this section we inject only strings\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst welcome = 'Welcome to 30 Days Of React'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst firstName = 'Asabeneh'\nconst lastName = 'Yetayeh'\nconst date = 'Oct 3, 2020'\n\n// JSX element, header\nconst header = () => {\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n Instructor: {firstName} {lastName}\n

    \n Date: {date}\n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\n// we render the App component using the ReactDOM package\nReactDOM.render(
    , rootElement)\n```\n\nSimilar to the Header component we can implement to Main and Footer component.\n\n```js\n// To get the root element from the HTML document\nconst rootElement = document.querySelector('.root')\n// JSX element, header\nconst welcome = 'Welcome to 30 Days Of React Challenge'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst author = {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n}\nconst date = 'Oct 2, 2020'\n\n// JSX element, header\nconst Header = () => (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n Instructor: {author.firstName} {author.lastName}\n

    \n Date: {date}\n
    \n
    \n)\n\nconst numOne = 3\nconst numTwo = 2\n\nconst result = (\n

    \n {numOne} + {numTwo} = {numOne + numTwo}\n

    \n)\n\nconst yearBorn = 1820\nconst currentYear = 2020\nconst age = currentYear - yearBorn\nconst personAge = (\n

    \n {' '}\n {author.firstName} {author.lastName} is {age} years old\n

    \n)\n\n// User Card Component\nconst UserCard = () => (\n
    \n asabeneh image\n

    \n {author.firstName} {author.lastName}\n

    \n
    \n)\n\n// JSX element, main\nconst techs = ['HTML', 'CSS', 'JavaScript']\nconst techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n\n// JSX element, main\nconst Main = () => (\n
    \n
    \n
    \n

    \n Prerequisite to get started{' '}\n \n react.js\n \n :\n

    \n
      {techsFormatted}
    \n {result}\n {personAge}\n
    \n \n
    \n
    \n)\n\nconst copyRight = '2020'\n\n// JSX element, footer\nconst Footer = () => (\n
    \n
    \n

    Copyright ©{copyRight}

    \n
    \n
    \n)\n\n// JSX element, app\nconst app = () => (\n
    \n
    \n
    \n
    \n
    \n)\n\n// we render the App component using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\n### Further on Functional components\n\nWe have transformed all the JSX elements of Day 2 to functional components, and by now you are very familiar with components. Let's create more components. What is the smallest size of a component? A component that returns only a single HTML as JSX is considered as a small component. A button component or an alert box component, or just an input field component.\n\n```js\nconst Button = () => \n```\n\nThe _Button_ component is made of a single HTML button element.\nLet's style this button using JavaScript style object. All CSS properties should be camelCase to make a JavaScript CSS object. If we pass a number without unit as CSS value, it is considered as px. See the example below.\n\n```js\nconst buttonStyles = {\n padding: '10px 20px',\n background: 'rgb(0, 255, 0',\n border: 'none',\n borderRadius: 5,\n}\nconst Button = () => \n```\n\nThe Button component is a dumb component, because it does not take any parameters and we cannot change the action text dynamically. We need to pass props to the button, to change the value dynamically. We will see props in the next section. Before we close today's lesson let's make another, more functional component, which displays a random hexadecimal number.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Hexadecimal color generator\nconst hexaColor = () => {\n let str = '0123456789abcdef'\n let color = ''\n for (let i = 0; i < 6; i++) {\n let index = Math.floor(Math.random() * str.length)\n color += str[index]\n }\n return '#' + color\n}\n\nconst HexaColor = () =>
    {hexaColor()}
    \n\nconst rootElement = document.getElementById('root')\n// we render the App component using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\n# Exercises: Components\n\n## Exercises: Level 1\n\n1. What is the difference between a regular function and an arrow function?\n2. What is a React Component?\n3. How do you make a React functional component?\n4. What is the difference between a pure JavaScript function and a functional component?\n5. How small is a React component?\n6. Can we make a button or input field component?\n7. Make a reusable Button component.\n8. Make a reusable InputField component.\n9. Make a reusable alert box component with one div parent element and one p child element of the div(warning alert box, success alert box).\n\n## Exercises: Level 2\n\n1. Create functional components and display the following images\n ![Front end](../images/frontend_technologies.png)\n\n2. Use functional component to create the following design\n\n![News Letter](../images/news_letter_design.png)\n\n## Exercises: Level 3\n\n1. Use the given hexadecimal color generator in the example to create these random colors\n\n![Hexadecimal colors](../images/hexadecimal_color_exercise.png)\n\n2. Use functional component to design the following user card.\n\n ![User Card](../images/user_card_design_jsx.png)\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_setting_up.md) | [Day 5 >>](../05_Day_Props/05_props.md)\n" }, { "path": "04_Day_Components/04_components_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "04_Day_Components/04_components_boilerplate/README.md", "content": "# 30 Days of React App: Day 4\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "04_Day_Components/04_components_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "04_Day_Components/04_components_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "04_Day_Components/04_components_boilerplate/src/index.js", "content": "// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\nconst hexaColor = () => {\n let str = '0123456789abcdef'\n let color = ''\n for (let i = 0; i < 6; i++) {\n let index = Math.floor(Math.random() * str.length)\n color += str[index]\n }\n return '#' + color\n}\n\nconst HexaColor = () => {\n const bgColor = hexaColor()\n const styles = {\n height: '100px',\n display: 'flex',\n 'justify-content': 'center',\n 'align-items': 'center',\n fontFamily: 'Montserrat',\n margin: '2px auto',\n borderRadius: '5px',\n width: '75%',\n border: '2px solid black',\n }\n return (\n
    \n

    {bgColor}

    \n
    \n )\n}\n\n// Header Component\nconst Header = () => (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 3, 2020\n
    \n
    \n)\n\n// User Card Component\nconst UserCard = () => (\n
    \n asabeneh image\n

    Asabeneh Yetayeh

    \n
    \n)\n\n// TechList Component\nconst TechList = () => {\n const techs = ['HTML', 'CSS', 'JavaScript']\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n}\nconst buttonStyles = {\n padding: '10px 20px',\n background: 'rgb(0, 255, 0)',\n border: 'none',\n borderRadius: 5,\n}\n\nconst Button = () => \n\n// Main Component\nconst Main = () => (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n
    \n {/* Generate two different hexa colors every time */}\n \n \n
    \n
    \n
    \n)\n\n// Footer Component\nconst Footer = () => (\n
    \n
    \n

    Copyright 2020

    \n
    \n
    \n)\n\n// The App, or the parent or the container component\nconst App = () => (\n
    \n
    \n
    \n
    \n
    \n)\n\nconst rootElement = document.getElementById('root')\n// we render the App component using the ReactDOM package\nReactDOM.render(, rootElement)\n" }, { "path": "05_Day_Props/05_props.md", "content": "
    \n

    30 Days Of React: Props

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 4](../04_Day_Component/04_components.md) | [Day 6 >>](../06_Day_Map_List_Keys/06_map_list_keys.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_5.jpg)\n\n- [Props](#props)\n - [Props in Functional Component](#props-in-functional-component)\n - [What is props?](#what-is-props)\n - [Props object](#props-object)\n - [Different data type props](#different-data-type-props)\n - [String props type](#string-props-type)\n - [Number props type](#number-props-type)\n - [Boolean props type](#boolean-props-type)\n - [Array props type](#array-props-type)\n - [Object props type](#object-props-type)\n - [Function prop types](#function-prop-types)\n - [Destructuring props](#destructuring-props)\n - [propTypes](#proptypes)\n - [defaultProps](#defaultprops)\n- [Exercises: Components and Props](#exercises-components-and-props)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Props\n\n## Props in Functional Component\n\nIn the previous day, we saw how to inject different data types to React component JSX. Now, let us see how we use it in component and also how to pass different data as props.\n\n## What is props?\n\nProps is a special keyword in React that stands for properties and is being used to pass data from one component to another and mostly from parent component to child component. We can say props is a data carrier or a means to transport data.\n\nI hope you are familiar with the JavaScript function. Most of the time, functions with parameters are smart and they can take dynamic data likewise props is a way we pass data or parameter to a component. Let's see the difference between a function and a component.\n\n```js\n// function syntax\n\nconst getUserInfo = (firstName, lastName, country) => {\n return `${firstName} ${lastName}. Lives in ${country}.`\n}\n\n// calling a functons\n\ngetUserInfo('Asabeneh', 'Yeteyeh', 'Finland')\n\n//component syntax\n\n// User component, component should start with an uppercase\nconst User = (props) => {\n return (\n
    \n

    \n {props.firstName}\n {props.lastName}\n

    \n {props.country}\n
    \n )\n}\n// calling or instantiating a component, this component has three properties and we call them props:firstName, lastName, country\n\n```\n\nIn the previous section, we injected data as follows and today we will change these data to props.\n\n```js\nconst welcome = 'Welcome to 30 Days Of React'\nconst title = 'Getting Started React'\nconst subtitle = 'JavaScript Library'\nconst author = {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n}\nconst date = 'Oct 4, 2020'\n\n// Header Component\nconst Header = () => (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {author.firstName} {author.lastName}\n

    \n {date}\n
    \n
    \n)\n```\n\nInstead of injecting data we can also pass the data as props. React props are similar to parameters in functions.\n\n## Props object\n\nReact props is an object which you get instantly when you create a React component. Before we pass properties to the component, let's check what do we get in the props object.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Header Component\nconst Header = (props) => {\n console.log(props) // empty object, {}\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {author.firstName} {author.lastName}\n

    \n {date}\n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n return (\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\n\nReactDOM.render(, rootElement)\n```\n\nIn the above console.log(props), you would get an empty object({}). That means if you do not pass any attributes or properties when you instantiate the component, the props will be empty otherwise it will be populated with the data you passed as attributes and the proper name of these attributes are props.\n\nLet's start with a simple example. In the example below, the welcome string has been passed as props in the Header components.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Header Component\nconst Header = (props) => {\n console.log(props) // {welcome:'Welcome to 30 Days Of React'}\n return (\n
    \n
    \n

    {props.welcome}

    \n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n return (\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\n\nReactDOM.render(, rootElement)\n```\n\nNow, when you do console.log(props) you should get the following object, that means the welcome property we passed to the Header component can be found inside the props object.\n\n```js\n{\n welcome: 'Welcome to 30 Days Of React'\n}\n```\n\nAs you can see in the above code, we passed only single props to Header component, the welcome props. A component can have one or many props. Props could be different data types. It could be a string, number, boolean, array, object or a function. We will cover different kind of props in the next sections.\n\n### Different data type props\n\n### String props type\n\nThe data type of the props we pass an attribute to the component is a string.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Header Component\nconst Header = (props) => {\n console.log(props)\n return (\n
    \n
    \n

    {props.welcome}

    \n

    {props.title}

    \n

    {props.subtitle}

    \n

    \n {props.firstName} {props.lastName}\n

    \n {props.date}\n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => (\n
    \n \n
    \n)\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf you check on the browser console, you will get the following object.\n\n```js\n{\nfirstName: \"Asabeneh\",\nlastName: \"Yetayeh\",\ndate: \"Oct 4, 2020\"\nsubtitle: \"JavaScript Library\"\ntitle: \"Getting Started React\"\nwelcome: \"Welcome to 30 Days Of React\"\n}\n```\n\nSince you are a JavaScript ninja by now, you know what do do with this object.\n\nAs you can see from the above example, the value of the props are written statically. However, if we want to apply some logic it is hard to implement with statically written data, so it will be better to use a variable as props. Let's see the following example:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Header Component\nconst Header = (props) => (\n
    \n
    \n

    {props.welcome}

    \n

    {props.title}

    \n

    {props.subtitle}

    \n

    \n {props.firstName} {props.lastName}\n

    \n {props.date}\n
    \n
    \n)\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const welcome = 'Welcome to 30 Days Of React'\n const title = 'Getting Started React'\n const subtitle = 'JavaScript Library'\n const firstName = 'Asabeneh'\n const lastName = 'Yetayeh'\n const date = 'Oct 4, 2020'\n\n return (\n
    \n \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Number props type\n\nLet's use a number props to a component\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Age = (props) =>
    The person is {props.age} years old.
    \nconst Weight = (props) => (\n

    The weight of the object on earth is {props.weight} N.

    \n)\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n let currentYear = 2020\n let birthYear = 1820\n const age = currentYear - birthYear\n const gravity = 9.81\n const mass = 75\n\n return (\n
    \n \n \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Boolean props type\n\nWe can pass boolean data types to a React component.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Status = (props) => {\n // ternary operator to check the status of the person\n let status = props.status ? 'Old enough to drive' : 'Too young for driving'\n return

    {status}

    \n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n let currentYear = 2020\n let birthYear = 2015\n const age = currentYear - birthYear // 15 years\n\n let status = age >= 18\n\n return (\n
    \n \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Array props type\n\nIn programming arrays and objects are the most frequently used data structure to solve different problems and store data in a more structured way. Therefore, we encounter data in the form of an array quite often. Let's pass an array as props to a component\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Skills = (props) =>
      {props.skills}
    \n\nconst App = () => (\n
    \n \n
    \n)\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf you see the result on the browser, the skills elements needs formatting. Therefore before we render, it should have some elements between each skill. To modify the array and to add a li element we can use map method. You should be very familiar with the functional programming map, filter and reduce to feel good at React if not please go back to day 1 JavaScript refresher. Let's apply map to modify the array.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Skills Component\nconst Skills = (props) => {\n // modifying the skills array\n const skillList = props.skills.map((skill) =>
  • {skill}
    • )\n return
      {skillList}
    \n}\n\nconst App = () => (\n
    \n \n
    \n)\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe will go in-depth about list and map in other sections. Now, let's see an object as a props.\n\n### Object props type\n\nWe may pass an object as props to a React component. Let's see an example.\nWe can change the previous Header props to object. For the time being let's change a few properties for better understanding.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Header Component\nconst Header = (props) => {\n return (\n
    \n
    \n

    {props.data.welcome}

    \n

    {props.data.title}

    \n

    {props.data.subtitle}

    \n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n }\n\n return (\n
    \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\nNow, let's change all the previous Header properties to an object.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n// Header Component\nconst Header = (props) => {\n return (\n
    \n
    \n

    {props.data.welcome}

    \n

    {props.data.title}

    \n

    {props.data.subtitle}

    \n

    \n {props.data.author.firstName} {props.data.author.lastName}\n

    \n {showDate(props.data.date)}\n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: new Date(), // date needs to be formatted to a human readable format\n }\n\n return (\n
    \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWhen we use an object as props we usually destructure the data to access the values. Destructuring makes our code easy to read. We will soon see the destructuring of props but before that let's see function as props for a React component.\n\n### Function prop types\n\nWe can pass a function as props type to a React component. Let's see some examples\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// A button component\n\nconst Button = (props) => \n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const sayHi = () => {\n alert('Hi')\n }\n\n return (\n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\nEven we can write a function inside the curly bracket\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// A button component\n\nconst Button = (props) => \n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n return (\n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\nNow, lets implement different functions as props\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// A button component\n\nconst Button = (props) => \n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n\n return (\n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIn the above example, onClick is a props to hold the greetPeople function. HTML has onclick, onmouseover, onhover, onkeypress and etc event handlers. In React, these handlers are in camelCase. For instance onClick, onMouseOver, onKeyPress etc. We will cover events in React in detail in other section.\n\nLet's see some more functions as props to give a clear understanding how to handle function as props in a React component.\n\nThis component shows month, date and year as an alert box.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// Function to display time in Mon date, year format eg Oct 4, 2020\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n\n// A button component\n\nconst Button = (props) => \n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const handleTime = () => {\n alert(showDate(new Date()))\n }\n const greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n return (\n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Destructuring props\n\nBy now, I believe you are a JavaScript ninja and you know about destructing arrays and objects. Destructuring code to some extent makes easy to read. Let us destructure the props in Header component. Everything we passed as props is stored in props object. Therefore, props is an object and we can destructure the properties. Let's destructure some of the props we wrote in object props example. We can destructure in many ways:\n\n1. Step by step destructuring\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n// Header Component\nconst Header = (props) => {\n const data = props.data\n const { welcome, title, subtitle, author, date } = data\n const { firstName, lastName } = author\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {showDate(date)}\n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: new Date(),\n }\n\n return (\n
    \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\n2. Destructuring in one line\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n// Header Component\nconst Header = (props) => {\n const data = props.data\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {showDate(date)}\n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: new Date(),\n }\n\n return (\n
    \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n3. Destructuring the props inside the parenthesis\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n// Header Component\nconst Header = ({\n data: {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n },\n}) => {\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {showDate(date)}\n
    \n
    \n )\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: new Date(),\n }\n\n return (\n
    \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nNow, let's destructure all the components we had and assemble them together. We pass props from one component to another typically from parent to a child component.\nFor instance in the Main component techs, user, greetPeople and handleTime props have been passed from the parent component Main to child components TechList and UserCard. Below, you will get all the codes destructured and cleaned.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\n// Fuction to show month date year\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n\n// Header Component\nconst Header = ({\n data: {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n },\n}) => {\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {showDate(date)}\n
    \n
    \n )\n}\n\n// TechList Component\nconst TechList = ({ techs }) => {\n const techList = techs.map((tech) =>
  • {tech}
    • )\n return techList\n}\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\n\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\n// Main Component\nconst Main = ({ user, techs, greetPeople, handleTime }) => (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n
    \n
    \n)\n\n// Footer Component\nconst Footer = ({ copyRight }) => (\n
    \n
    \n

    Copyright {copyRight.getFullYear()}

    \n
    \n
    \n)\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: new Date(), // date needs to be formatted to a human readable format\n }\n const date = new Date()\n const techs = ['HTML', 'CSS', 'JavaScript']\n // copying the author from data object to user variable using spread operator\n const user = { ...data.author, image: asabenehImage }\n\n const handleTime = () => {\n alert(showDate(new Date()))\n }\n const greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n\n return (\n
    \n
    \n \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## propTypes\n\nThe propTypes package helps us to assign the data types of the props we passed to a component.\n\n## defaultProps\n\nThe defaultProps can be used when we want to have some default prop types for a component.\n\nWe will cover propTypes in detail in other sections.\n\n# Exercises: Components and Props\n\n## Exercises: Level 1\n\n1. What is props in a React component ?\n2. How do you access props in a React component ?\n3. What data types can we pass as props to components ?\n4. What is a propTypes?\n5. What is a default propTypes?\n\n## Exercises: Level 2\n\n1. Create a functional component and display the following images\n ![Front end](../images/frontend_technologies.png)\n\n2. Use functional component to create the following design\n\n![News Letter](../images/news_letter_design.png)\n\n## Exercises: Level 3\n\n1. Use the given hexadecimal color generator in the example to create these random colors. If you don't know how to generate the hexadecimal color you can use [dummy data generator](https://www.30daysofreact.com/dummy-data)\n\n![Hexadecimal colors](../images/hexadecimal_color_exercise.png)\n\n2. Use functional component to design the following user card.\n\n![User Card](../images/user_card_design_jsx.png)\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 4](../04_Day_Component/04_components.md) | [Day 6 >>](../06_Day_Map_List_Keys/06_map_list_keys.md)\n" }, { "path": "05_Day_Props/05_props_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "05_Day_Props/05_props_boilerplate/README.md", "content": "# 30 Days of React App: Day 5\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "05_Day_Props/05_props_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "05_Day_Props/05_props_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "05_Day_Props/05_props_boilerplate/src/index.js", "content": "import React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\n// Fuction to show month date year\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n\n// Header Component\nconst Header = ({\n data: {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n },\n}) => {\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {showDate(date)}\n
    \n
    \n )\n}\n\n// TechList Component\nconst TechList = ({ techs }) => {\n const techList = techs.map((tech) =>
  • {tech}
    • )\n return techList\n}\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\n\nconst Button = ({ text, onClick, style }) => (\n \n)\n\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\n// Main Component\nconst Main = ({ user, techs, greetPeople, handleTime }) => (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n
    \n
    \n)\n\n// Footer Component\nconst Footer = ({ copyRight }) => (\n
    \n
    \n

    Copyright {copyRight.getFullYear()}

    \n
    \n
    \n)\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: new Date(), // date needs to be formatted to a human readable format\n }\n const date = new Date()\n const techs = ['HTML', 'CSS', 'JavaScript']\n // copying the author from data object to user variable using spread operator\n const user = { ...data.author, image: asabenehImage }\n\n const handleTime = () => {\n alert(showDate(new Date()))\n }\n const greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n\n return (\n
    \n
    \n \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys.md", "content": "
    \n

    30 Days Of React: Mapping Arrays

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 5](./../05_Day_Props/05_props.md) | [Day 7 >>](../07_Day_Class_Components/07_class_components.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_6.jpg)\n\n- [Mapping arrays](#mapping-arrays)\n - [Mapping and rendering arrays](#mapping-and-rendering-arrays)\n - [Mapping array of numbers](#mapping-array-of-numbers)\n - [Mapping array of arrays](#mapping-array-of-arrays)\n - [Mapping array of objects](#mapping-array-of-objects)\n - [Key in mapping arrays](#key-in-mapping-arrays)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Mapping arrays\n\nAn array is the most frequently used data structure to handle many kinds of problems. In React, we use map to modify an array to list of JSX by adding a certain HTML elements to each element of an array.\n\n## Mapping and rendering arrays\n\nMost of the time data is in the form of an array or an array of objects. To render this array or array of objects most of the time we modify the data using _map_. In the previous section, we have rendered the techs list using a map method. In this section, we will see more examples.\n\nIn the following examples, you will see how we render an array of numbers, an array of strings, an array of countries and an array of skills on the browser.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nconst App = () => {\n return (\n
    \n
    \n

    Numbers List

    \n {[1, 2, 3, 4, 5]}\n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf you check the browser, you will see the numbers are attached together in one line. To avoid this, we modify the array and change the array elements to JSX element. See the example below, the array has been modified to a list of JSX elements.\n\n### Mapping array of numbers\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Numbers = ({ numbers }) => {\n // modifying array to array of li JSX\n const list = numbers.map((number) =>
  • {number}
    • )\n return list\n}\n\n// App component\n\nconst App = () => {\n const numbers = [1, 2, 3, 4, 5]\n\n return (\n
    \n
    \n

    Numbers List

    \n
      \n \n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Mapping array of arrays\n\nLet's see how to map array of arrays\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst skills = [\n ['HTML', 10],\n ['CSS', 7],\n ['JavaScript', 9],\n ['React', 8],\n]\n\n// Skill Component\nconst Skill = ({ skill: [tech, level] }) => (\n
  • \n {tech} {level}\n
    • \n)\n\n// Skills Component\nconst Skills = ({ skills }) => {\n const skillsList = skills.map((skill) => )\n console.log(skillsList)\n return
      {skillsList}
    \n}\n\nconst App = () => {\n return (\n
    \n
    \n

    Skills Level

    \n \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Mapping array of objects\n\nRendering array of objects\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst countries = [\n { name: 'Finland', city: 'Helsinki' },\n { name: 'Sweden', city: 'Stockholm' },\n { name: 'Denmark', city: 'Copenhagen' },\n { name: 'Norway', city: 'Oslo' },\n { name: 'Iceland', city: 'Reykjavík' },\n]\n\n// Country component\nconst Country = ({ country: { name, city } }) => {\n return (\n
    \n

    {name}

    \n {city}\n
    \n )\n}\n\n// countries component\nconst Countries = ({ countries }) => {\n const countryList = countries.map((country) => )\n return
    {countryList}
    \n}\n// App component\nconst App = () => (\n
    \n
    \n

    Countries List

    \n \n
    \n
    \n)\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Key in mapping arrays\n\nKeys help React to identify items which have changed, added, or removed. Keys should be given to the elements inside the array to give the elements a stable identity. The key should be unique. Mostly data will come with as an id and we can use id as key. If we do not pass key to React during mapping it raises a warning on the browser. If the data does not have an id we have to find a way to create a unique identifier for each element when we map it. See the following example:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Numbers = ({ numbers }) => {\n // modifying array to array of li JSX\n const list = numbers.map((num) =>
  • {num}
    • )\n return list\n}\n\nconst App = () => {\n const numbers = [1, 2, 3, 4, 5]\n\n return (\n
    \n
    \n

    Numbers List

    \n
      \n \n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet's also add in key in countries mapping example.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst countries = [\n { name: 'Finland', city: 'Helsinki' },\n { name: 'Sweden', city: 'Stockholm' },\n { name: 'Denmark', city: 'Copenhagen' },\n { name: 'Norway', city: 'Oslo' },\n { name: 'Iceland', city: 'Reykjavík' },\n]\n\n// Country component\nconst Country = ({ country: { name, city } }) => {\n return (\n
    \n

    {name}

    \n {city}\n
    \n )\n}\n\n// countries component\nconst Countries = ({ countries }) => {\n const countryList = countries.map((country) => (\n \n ))\n return
    {countryList}
    \n}\nconst App = () => (\n
    \n
    \n

    Countries List

    \n \n
    \n
    \n)\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n# Exercises\n\n## Exercises: Level 1\n\n1. Why you need to map an array ?\n2. Why we need keys during mapping an array ?\n3. What is the importance of destructuring your code ?\n4. Does destructuring make your code clean and easy to read ?\n\n## Exercises: Level 2\n\n1. In the following design, evens are green, odds are yellow and prime numbers are red. Build the following colors using React component\n\n![Number Generator](../images/day_6_number_generater_exercise.png)\n\n2. Create the following hexadecimal colors using React component\n\n![Number Generator](../images/day_6_hexadecimal_colors_exercise.png)\n\n## Exercises: Level 3\n\n1.Make the following bar group using the given [data](../06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js)\n\n![Ten most highest populations](../images/day_6_ten_highest_populations_exercise.png)\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 5](./../05_Day_Props/05_props.md) | [Day 7 >>](../07_Day_Class_Components/07_class_components.md)\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys_boilerplate/README.md", "content": "# 30 Days of React App: Day 6\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js", "content": "import React from 'react'\nimport ReactDOM from 'react-dom'\n\n\n// importing data\n\nimport { countriesData } from './data/countries'\nimport { tenMostHighestPopulations } from './data/ten_most_highest_populations'\n\nconst countries = [\n { name: 'Finland', city: 'Helsinki' },\n { name: 'Sweden', city: 'Stockholm' },\n { name: 'Denmark', city: 'Copenhagen' },\n { name: 'Norway', city: 'Oslo' },\n { name: 'Iceland', city: 'Reykjavík' },\n]\n\n// Country component\nconst Country = ({ country: { name, city } }) => {\n return (\n
    \n

    {name}

    \n {city}\n
    \n )\n}\n\n// countries component\nconst Countries = ({ countries }) => {\n const countryList = countries.map((country) => (\n \n ))\n return
    {countryList}
    \n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => {\n return (\n
    \n
    \n

    Countries List

    \n \n
    \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "07_Day_Class_Components/07_class_based_components_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "07_Day_Class_Components/07_class_based_components_boilerplate/README.md", "content": "# 30 Days of React App: Day 7\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "07_Day_Class_Components/07_class_based_components_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "07_Day_Class_Components/07_class_based_components_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "07_Day_Class_Components/07_class_based_components_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "07_Day_Class_Components/07_class_based_components_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "07_Day_Class_Components/07_class_based_components_boilerplate/src/index.js", "content": "// index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\n// Fuction to show month date year\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n \n \n
    \n
    \n )\n }\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n }\n handleTime = () => {\n alert(this.showDate(new Date()))\n }\n greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n render() {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n\n // copying the author from data object to user variable using spread operator\n const user = { ...data.author, image: asabenehImage }\n\n return (\n
    \n
    \n \n\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n\n" }, { "path": "07_Day_Class_Components/07_class_components.md", "content": "
    \n

    30 Days Of React: Class Components

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../08_Day_States/08_states.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_7.jpg)\n\n- [Class Components](#class-components)\n - [Accessing props in Class components](#accessing-props-in-class-components)\n - [Methods in Class based component](#methods-in-class-based-component)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Class Components\n\nIn the previous sections, we have covered JSX, functional component and props. In this section, we will cover class components or stateful component. Only class based components used to have state and life cycle methods. However, after React version 16.8.0 functional components can have state and life cycle using React Hooks. In 30 Days Of React challenge, we will cover React before 16.8.0 and after, that mean both old and newest version. There are lots of codes written in older version and at some point it may need migration. In addition, to understand React very well someone has to understand class based component too.\n\nAll the previous components are functional components. Let us make also class based component. Class based component is made using JavaScript class and it inherits from react Component. Let us learn how to make a class based component by converting all the functional components we made previously. It is not important to convert all but we are converting them for the sake of learning how to change functional components to class components.\n\n```js\n// Pure JavaScript class and child\n// Imagine this what we import from React package\nclass Component {\n constructor(props) {}\n}\n\n// This how we make class based components by inheriting from the parent\nclass Child extends Component {\n constructor(props) {\n super(props)\n }\n}\n```\n\nFunctional React component\n\n```js\n// index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n// Header Component\n// Functional component\nconst Header = () => (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 6, 2020\n
    \n
    \n)\nconst rootElement = document.getElementById('root')\nReactDOM.render(
    , rootElement)\n```\n\nClass based React component is a child of React.Component and it has a built-in render method and it may have a constructor.\n\n```js\n//index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n render() {\n return (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 7, 2020\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(
    , rootElement)\n```\n\nLet's see the above component with a constructor\n\n```js\n//index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class base component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n return (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 7, 2020\n
    \n
    \n )\n }\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(
    , rootElement)\n```\n\nLet's change all the functional component to class based components\n\n```js\n// TechList Component\n// functional component\nconst TechList = () => {\n const techs = ['HTML', 'CSS', 'JavaScript']\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n}\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const techs = ['HTML', 'CSS', 'JavaScript']\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Functional Component\nconst Main = () => (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n
    \n
    \n)\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n
    \n
    \n )\n }\n}\n\n// Footer Component\n// Functional component\nconst Footer = () => (\n
    \n
    \n

    Copyright 2020

    \n
    \n
    \n)\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright 2020

    \n
    \n
    \n )\n }\n}\n\n// The App, or the parent or the container component\n// Functional Component\nconst App = () => (\n
    \n
    \n
    \n
    \n
    \n)\n\n// The App, or the parent or the container component\n// Class Component\nclass App extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n
    \n
    \n
    \n )\n }\n}\n```\n\nLet's put all the class based components together in one file.\n\n```js\n//index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class base component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n return (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 7, 2020\n
    \n
    \n )\n }\n}\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const techs = ['HTML', 'CSS', 'JavaScript']\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n
    \n
    \n )\n }\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright 2020

    \n
    \n
    \n )\n }\n}\n\n// The App, or the parent or the container component\n// Class Component\nclass App extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Accessing props in Class components\n\nWe stated that props is a means to send data from on component to another or we can call it that props is a data carrier. Therefore, we should handle props in class based component too. We can access props of a class based component using the keyword _this_. See the example below.\n\n```js\n// index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n return (\n
    \n
    \n

    {this.props.data.welcome}

    \n

    {this.props.data.title}

    \n

    \n {this.props.data.author.firstName} {this.props.data.author.lastName}\n

    \n {this.props.data.date}\n
    \n
    \n )\n }\n}\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n\n return (\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nAs you can see in the above example, to get the data out from props we have write _props.data_ every time. We can avoid this repetition using destructuring.\n\n```js\n// index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\nconst App = () => {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 6, 2020',\n }\n\n return (\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nAs you can see, the above code cleaner than the previous. Now, let's clean all the components we have and put all together.\n\n```js\n// index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n
    \n
    \n )\n }\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n render() {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n\n return (\n
    \n
    \n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Methods in Class based component\n\nWe access methods in class based component. Most of the time, we write different methods on the parent component and we pass them to child components. Let's see the implementation.\n\nLet's add a method on this component.\n\n```js\n//index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n render() {\n return (\n
    \n
    \n

    Welcome to 30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Asabeneh Yetayeh

    \n Oct 7, 2020\n \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(
    , rootElement)\n```\n\nThe invoking or calling of the method triggers when the event occurs. Therefore, whenever you pass a method to an event listener do not invoke the method.\n\nNow, let's the code we had add all the necessary methods.\n\n```js\n// index.js\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\n// Fuction to show month date year\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n \n \n
    \n
    \n )\n }\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n }\n handleTime = () => {\n alert(this.showDate(new Date()))\n }\n greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n render() {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n\n // copying the author from data object to user variable using spread operator\n const user = { ...data.author, image: asabenehImage }\n\n return (\n
    \n
    \n \n\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nMost of the time the container or the parent component can be written as class component and others as functional or presentational components. Data usually flows from parent components to child component and it is unidirectional. However, the latest version of react can allow us to write every component in our application only with functional components. This was impossible in previous versions.\nIn next section, we will cover state which is the heart of React. State allows React component to rerender when whenever there is a change in state.\n\n# Exercises\n\n## Exercises: Level 1\n\n1. How do you write a pure JavaScript function\n2. What is inheritance and how do you make a child from a parent class?\n3. What is class based React component ?\n4. What is the difference between functional React component and class based React component ?\n5. When do we need to use class based components instead of functional components\n6. What is the use cases of class based component ?\n7. Which type of component do use most frequently ? functional or class-based component\n8. What is React life cycle ? (not covered yet) ?\n9. What is state in React ? (not covered yet)\n\n## Exercises: Level 2\n\nLearn more about class based component by changing previous days exercises to class based components\n\n## Exercises: Level 3\n\nComing ...\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../08_Day_States/08_states.md)\n" }, { "path": "08_Day_States/08_states.md", "content": "
    \n

    30 Days Of React: States

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 7](../07_Day_Class_Components/07_class_components.md) | [Day 9 >>](../09_Day_Conditional_Rendering/09_conditional_rendering.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_8.jpg)\n\n- [States](#states)\n - [What is State?](#what-is-state)\n - [How to set a state](#how-to-set-a-state)\n - [Resetting a state using a JavaScript method](#resetting-a-state-using-a-javascript-method)\n - [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# States\n\n## What is State?\n\nWhat is state ? The English meaning of state is _the particular condition that someone or something is in at a specific time_.\n\nLet us see some states being something - Are you happy or sad? - Is light on or off ? Is present or absent ? - Is full or empty ? For instance, I am happy because I am enjoying creating 30 Days Of React challenge. I believe that you are happy too.\n\nState is an object in react which let the component re-render when state data changes.\n\n## How to set a state\n\nWe set an initial state inside the constructor or outside the constructor of a class based component. We do not directly change or mutate the state but we use the _setState()_ method to reset to a new state. . As you can see below in the state object we have count with initial value 0. We can access the state object using _this.state_ and the property name. See the example below.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends React.Component {\n // declaring state\n state = {\n count: 0,\n }\n render() {\n // accessing the state value\n const count = this.state.count\n return (\n
    \n

    {count}

    \n
    \n )\n }\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf you run the above code you will see zero on the browser. We can increase or decrease the value the state by changing the value of the state using JavaScript method.\n\n## Resetting a state using a JavaScript method\n\nNow, let's add some methods which increase or decrease the value of count by clicking a button. Let us add a button to increase and a button to decrease the value of count. To set the state we use react method _this.setState_. See the example below\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nclass App extends React.Component {\n // declaring state\n state = {\n count: 0,\n }\n render() {\n // accessing the state value\n const count = this.state.count\n return (\n
    \n

    {count}

    \n \n
    \n )\n }\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf you understand the above example, adding minus one method will be easy. Let us add the minus one method on the click event.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nclass App extends React.Component {\n // declaring state\n state = {\n count: 0,\n }\n render() {\n // accessing the state value\n const count = this.state.count\n return (\n
    \n

    {count}

    \n\n
    \n this.setState({ count: this.state.count + 1 })}\n >\n Add One\n {' '}\n this.setState({ count: this.state.count - 1 })}\n >\n Minus One\n \n
    \n
    \n )\n }\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nBoth button work well, but we need to re-structure the code well. Let us create separate methods in the component.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nclass App extends React.Component {\n // declaring state\n state = {\n count: 0,\n }\n // method which add one to the state\n\n addOne = () => {\n this.setState({ count: this.state.count + 1 })\n }\n\n // method which subtract one to the state\n minusOne = () => {\n this.setState({ count: this.state.count - 1 })\n }\n render() {\n // accessing the state value\n const count = this.state.count\n return (\n
    \n

    {count}

    \n\n
    \n {' '}\n \n
    \n
    \n )\n }\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet us do more example about state, in the following example we will develop small application which shows either a dog or cat.\nWe can start by setting the initial state with cat then when it is clicked it will show dog and alternatively. We need one method which changes the animal alternatively. See the code below. If you want to see live click [here](https://codepen.io/Asabeneh/full/LYVxKpq).\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nclass App extends React.Component {\n // declaring state\n state = {\n image: 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg',\n }\n changeAnimal = () => {\n let dogURL =\n 'https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg'\n let catURL =\n 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'\n let image = this.state.image === catURL ? dogURL : catURL\n this.setState({ image })\n }\n\n render() {\n // accessing the state value\n const count = this.state.count\n return (\n
    \n

    30 Days Of React

    \n
    \n animal\n
    \n\n \n
    \n )\n }\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nNow, let's put all the codes we have so far and also let's implement state when it is necessary.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\n// Fuction to show month date year\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nconst Count = ({ count, addOne, minusOne }) => (\n
    \n

    {count}

    \n
    \n
    \n
    \n)\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const {\n techs,\n user,\n greetPeople,\n handleTime,\n changeBackground,\n count,\n addOne,\n minusOne,\n } = this.props\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n \n
    \n
    \n )\n }\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n count: 0,\n styles: {\n backgroundColor: '',\n color: '',\n },\n }\n showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n }\n addOne = () => {\n this.setState({ count: this.state.count + 1 })\n }\n\n // method which subtract one to the state\n minusOne = () => {\n this.setState({ count: this.state.count - 1 })\n }\n handleTime = () => {\n alert(this.showDate(new Date()))\n }\n greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n changeBackground = () => {}\n render() {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n const date = new Date()\n // copying the author from data object to user variable using spread operator\n const user = { ...data.author, image: asabenehImage }\n\n return (\n
    \n {this.state.backgroundColor}\n
    \n \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nI believe that now you have a very good understanding of state. After this, we will use state in other sections too because state and props is the core of a react application.\n\n## Exercises\n\n### Exercises: Level 1\n\n1. What was your state today? Are you happy? I hope so. If you manage to make it this far you should be happy.\n2. What is state in React ?\n3. What is the difference between props and state in React ?\n4. How do you access state in a React component ?\n5. How do you set a set in a React component ?\n\n### Exercises: Level 2\n\n1. Use React state to change the background of the page. You can use this technique to apply a dark mode for your portfolio.\n\n![Change Background](../images/08_day_changing_background_exercise.gif)\n\n2. After long time of lock down, you may think of travelling and you do not know where to go. You may be interested to develop a random country selector that selects your holiday destination.\n\n![Change Background](../images/08_day_select_country_exercise.gif)\n\n### Exercises: Level 3\n\nComing\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 7](../07_Day_Class_Components/07_class_components.md) | [Day 9 >>](../09_Day_Conditional_Rendering/09_conditional_rendering.md)\n" }, { "path": "08_Day_States/08_states_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "08_Day_States/08_states_boilerplate/README.md", "content": "# 30 Days of React App: Day 8\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "08_Day_States/08_states_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "08_Day_States/08_states_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "08_Day_States/08_states_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "08_Day_States/08_states_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "08_Day_States/08_states_boilerplate/src/index.js", "content": "// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\n\n// Fuction to show month date year\n\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n constructor(props) {\n super(props)\n // the code inside the constructor run before any other code\n }\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nconst Count = ({ count, addOne, minusOne }) => (\n
    \n

    {count}

    \n
    \n
    \n
    \n)\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n const {\n techs,\n user,\n greetPeople,\n handleTime,\n changeBackground,\n count,\n addOne,\n minusOne,\n } = this.props\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n \n
    \n
    \n )\n }\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n count: 0,\n styles: {\n backgroundColor: '',\n color: '',\n },\n }\n showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n }\n addOne = () => {\n this.setState({ count: this.state.count + 1 })\n }\n\n // method which subtract one to the state\n minusOne = () => {\n this.setState({ count: this.state.count - 1 })\n }\n handleTime = () => {\n alert(this.showDate(new Date()))\n }\n greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n changeBackground = () => {}\n render() {\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n const date = new Date()\n // copying the author from data object to user variable using spread operator\n const user = { ...data.author, image: asabenehImage }\n\n return (\n
    \n {this.state.backgroundColor}\n
    \n \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering.md", "content": "
    \n

    30 Days Of React: Conditional Rendering

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_9.jpg)\n\n# Conditional Rendering\n\nAs we can understand from the term, conditional rendering is a way to render different JSX or component at different condition. We can implement conditional rendering using regular if and else statement, ternary operator and &&. Let's implement a different conditional rendering.\n\n## Conditional Rendering using If and Else statement\n\nIn the code below, we have an initial state of loggedIn which is false. If the state is false we inform user to log in otherwise we welcome the user.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n render() {\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n

    Select a country for your next holiday

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n\n // conditional rendering using if and else statement\n\n let status\n\n if (this.state.loggedIn) {\n status =

    Welcome to 30 Days Of React

    \n } else {\n status =

    Please Login

    \n }\n\n return (\n
    \n
    \n {status}\n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet's add a method which allow as to toggle the status of the user. We should have a button to handle event for logging in and logging out.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: '3px auto',\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n\n let status\n let text\n\n if (this.state.loggedIn) {\n status =

    Welcome to 30 Days Of React

    \n text = 'Logout'\n } else {\n status =

    Please Login

    \n text = 'Login'\n }\n\n return (\n
    \n
    \n {status}\n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nHow about if our condition is more than two? Like pure JavaScript we can use if else if statement. In general, conditional rendering is not different from pure JavaScript conditional statement.\n\n## Conditional Rendering using Ternary Operator\n\nTernary operator is an an alternative for if else statement. However, there is more use cases for ternary operator than if else statement. For example, use can use ternary operator inside styles, className or many places in a component than regular if else statement.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: '3px auto',\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n render() {\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n\n let status = this.state.loggedIn ? (\n

    Welcome to 30 Days Of React

    \n ) : (\n

    Please Login

    \n )\n\n return (\n
    \n
    \n {status}\n \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIn addition to JSX, we can also conditionally render a component. Let's change the above conditional JSX to a component.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: '3px auto',\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n render() {\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nconst Login = () => (\n
    \n

    Please Login

    \n
    \n)\nconst Welcome = (props) => (\n
    \n

    Welcome to 30 Days Of React

    \n
    \n)\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n\n const status = this.state.loggedIn ? : \n\n return (\n
    \n
    \n {status}\n \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Conditional Rendering using && Operator\n\nThe && operator render the right JSX operand if the left operand(expression) is true.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: '3px auto',\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n}\n\n// class based component\nclass Header extends React.Component {\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\nconst Login = () => (\n
    \n

    Please Login

    \n
    \n)\nconst Welcome = (props) => (\n
    \n

    Welcome to 30 Days Of React

    \n
    \n)\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n techs: ['HTML', 'CSS', 'JS'],\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n\n // We can destructure state\n\n const { loggedIn, techs } = this.state\n\n const status = loggedIn ? : \n\n return (\n
    \n
    \n {status}\n \n {techs.length === 3 && (\n

    You have all the prerequisite courses to get started React

    \n )}\n {!loggedIn && (\n

    \n Please login to access more information about 30 Days Of React\n challenge\n

    \n )}\n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIn the previous section, we used alert box to greet people and also to display time. Let's render the greeting and time on browser DOM instead of displaying on alert box.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nconst Message = ({ message }) => (\n
    \n

    {message}

    \n
    \n)\nconst Login = () => (\n
    \n

    Please Login

    \n
    \n)\nconst Welcome = (props) => (\n
    \n

    Welcome to 30 Days Of React

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n render() {\n const {\n techs,\n greetPeople,\n handleTime,\n loggedIn,\n handleLogin,\n message,\n } = this.props\n console.log(message)\n\n const status = loggedIn ? : \n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n {techs.length === 3 && (\n

    You have all the prerequisite courses to get started React

    \n )}\n
    \n {' '}\n \n {!loggedIn &&

    Please login to access more information about 30 Days Of React challenge

    }\n
    \n
    \n \n
    \n {status}\n
    \n \n
    \n
    \n )\n }\n}\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: '3px auto',\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n techs: ['HTML', 'CSS', 'JS'],\n message: 'Click show time or Greet people to change me',\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return `${month} ${date}, ${year}`\n }\n handleTime = () => {\n let message = this.showDate(new Date())\n this.setState({ message })\n }\n greetPeople = () => {\n let message = 'Welcome to 30 Days Of React Challenge, 2020'\n this.setState({ message })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n\n return (\n
    \n
    \n\n \n\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n## Testimony\nNow it is time to express your thoughts about the Author and 30DaysOfReact. You can leave your testimonial on this [link](https://www.asabeneh.com/testimonials)\n\n## Exercises\n\n### Exercises: Level 1\n\n1. What is conditional rendering?\n2. How do you implement conditional rendering?\n3. Which method of conditional rendering do you prefer to use?\n\n### Exercises: Level 2\n\n1. Make a single page application which changes the body of the background based on the season of the year(Autumn, Winter, Spring, Summer)\n2. Make a single page application which change the body of the background based on the time of the day(Morning, Noon, Evening, Night)\n\n### Exercises: Level 3\n\n1. Fetching data takes some amount of time. A user has to wait until the data get loaded. Implement a loading functionality of a data is not fetched yet. You can simulate the delay using setTimeout.\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md)\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/README.md", "content": "# 30 Days of React App: Day 9\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/index.js", "content": "// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\n// class based component\nclass Header extends React.Component {\n render() {\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nconst Message = ({ message }) => (\n
    \n

    {message}

    \n
    \n)\nconst Login = () => (\n
    \n

    Please Login

    \n
    \n)\nconst Welcome = (props) => (\n
    \n

    Welcome to 30 Days Of React

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n render() {\n const {\n techs,\n greetPeople,\n handleTime,\n loggedIn,\n handleLogin,\n message,\n } = this.props\n console.log(message)\n\n const status = loggedIn ? : \n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n {techs.length === 3 && (\n

    You have all the prerequisite courses to get started React

    \n )}\n
    \n {' '}\n \n {!loggedIn && (\n

    \n Please login to access more information about 30 Days Of React\n challenge\n

    \n )}\n
    \n
    \n \n
    \n {status}\n
    \n \n
    \n
    \n )\n }\n}\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: '3px auto',\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n techs: ['HTML', 'CSS', 'JS'],\n message: 'Click show time or Greet people to change me',\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return `${month} ${date}, ${year}`\n }\n handleTime = () => {\n let message = this.showDate(new Date())\n this.setState({ message })\n }\n greetPeople = () => {\n let message = 'Welcome to 30 Days Of React Challenge, 2020'\n this.setState({ message })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n\n return (\n
    \n
    \n\n \n\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure.md", "content": "
    \n

    30 Days Of React: React Project Folder Structure

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 9](../09_Day_Conditional_Rendering/09_conditional_rendering.md) | [Day 11 >>](../11_Day_Events/11_events.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_10.jpg)\n\n- [React Project Folder Structure and File Naming](#react-project-folder-structure-and-file-naming)\n - [File Naming](#file-naming)\n - [Folder](#folder)\n - [Components Folder](#components-folder)\n - [Fragments](#fragments)\n- [Exercises](#exercises)\n - [Exercises:Level 1](#exerciseslevel-1)\n - [Exercises:Level 2](#exerciseslevel-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# React Project Folder Structure and File Naming\n\nThere is no strict way to use a single folder structure or file naming in React project. Most of the time, these kind of choice can be made by a team. Sometimes a company may have a developed guidelines about what code conventions to follow, folder structure and file naming. There is no right or wrong way of structuring a React project but some structures are better than the others for scalability,maintainability, ease of working on files and easy to understand structure. If you like to learn further about folder structure you may check the following articles.\n\n- [React Folder Structure by https://www.devaradise.com ](https://www.devaradise.com/react-project-folder-structure)\n- [React Folder Structure by www.robinwieruch.de ](https://www.robinwieruch.de/react-folder-structure)\n- [React Folder Structure by Faraz Ahmad](https://dev.to/farazamiruddin/an-opinionated-guide-to-react-folder-structure-file-naming-1l7i)\n- [React Folder Structure by https://maxrozen.com/](https://maxrozen.com/guidelines-improve-react-app-folder-structure/)\n\nI use a mix of different conventions. If you like you can follow it but please stick in a structure which you think makes sense for you.\n\n## File Naming\n\nIn all my React project, I will use CamelCase file name for all components. I prefer to use descriptive long name.\n\n## Folder\n\nI found it easy to put all images, icons and fonts in the assets folder and all CSS style sheets in styles folder. All components will be in the components folder.\n\nSo far, we have been working on index.js file. We have lots of component on index.js. Today we will move every component to a single file and we will import all the files to App.js. In the process, you will see my folder structure. Currently, we are at src directory. All the folder structure will be inside the src directory. Let's start from the index.js file. In addition to index.js file, let's create an App.js file and move most of the components we had to App.js for the time being.\nThe index.js is your getaway to connect the component with index.html.\n\n```js\n// src/index.js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = () =>

    Welcome to 30 Days Of React

    \n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIn the above snippet of code, we have the App component. Let's create the App component to its own file, App.js\n\n```js\n// src/App.js\nimport React from 'react\nconst App = () =>

    Welcome to 30 Days Of React

    \n```\n\nWe have to export the component to import it in another file. We can export it as a default or named export. In one file, we can make one default export and many named exports. First, let's implement it using name export and later in default export.\n\nWe just add the keyword export before _let_ or _const_ to make a named export.\n\n```js\n// src/App.js\nimport React from 'react\n\n// named export in arrow function\nexport const App = () =>

    Welcome to 30 Days Of React

    \n```\n\nExporting in a function declaration, a regular function\n\n```js\n// src/App.js\nimport React from 'react\n// named export in regular function, function declaration\nexport function App () {\nreturn

    Welcome to 30 Days Of React

    \n}\n```\n\nNow, let's import the App component from the App.js file to index.js.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { App } from './App'\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe saw a named export and now let's implement it with default export. We can do it in two ways but it is recommended to use the second way if we are exporting components because sometimes we may bind a component with another higher order component.\n\n```js\n// src/App.js\nimport React from 'react\n// export default in arrow function\nexport default const App = () =>

    Welcome to 30 Days Of React

    \n\n```\n\n```js\n// src/App.js\nimport React from 'react\n// export default in arrow function\nexport default function App () {\n return

    Welcome to 30 Days Of React

    \n}\n```\n\n```js\n// src/App.js\n// Recommended for most of the cases\nimport React from 'react\nconst App = () =>

    Welcome to 30 Days Of React

    \nexport default App\n```\n\nIf a component is exported as default we do not need curly bracket during importing.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf you remember, we created the following components so far and we have been putting them together. It is not easy to work like this. Now we will move them all components to a separate file.\n\n```js\n// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images'\nimport { countriesData } from './data/countries'\n\n// Header component\nclass Header extends React.Component {\n render() {\n console.log(this.props.data)\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = this.props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n }\n}\n\nconst Country = ({\n country: { name, capital, flag, languages, population, currency },\n}) => {\n const formatedCapital =\n capital.length > 0 ? (\n <>\n Capital: \n {capital}\n \n ) : (\n ''\n )\n const formatLanguage = languages.length > 1 ? `Languages` : `Language`\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    {formatedCapital}

    \n

    \n {formatLanguage}: \n {languages.join(', ')}\n

    \n

    \n Population: \n {population.toLocaleString()}\n

    \n

    \n Currency: \n {currency}\n

    \n
    \n
    \n )\n}\n\n// User Card Component\nconst UserCard = () => (\n
    \n asabeneh image\n

    Asabeneh Yetayeh

    \n
    \n)\n\n// Hexadecimal color generator\nconst hexaColor = () => {\n let str = '0123456789abcdef'\n let color = ''\n for (let i = 0; i < 6; i++) {\n let index = Math.floor(Math.random() * str.length)\n color += str[index]\n }\n return '#' + color\n}\n\nconst HexaColor = () =>
    {hexaColor()}
    \n\nconst Message = ({ message }) => (\n
    \n

    {message}

    \n
    \n)\nconst Login = () => (\n
    \n

    Please Login

    \n
    \n)\nconst Welcome = (props) => (\n
    \n

    Welcome to 30 Days Of React

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n render() {\n const {\n techs,\n greetPeople,\n handleTime,\n loggedIn,\n handleLogin,\n message,\n } = this.props\n console.log(message)\n\n const status = loggedIn ? : \n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n {techs.length === 3 && (\n

    You have all the prerequisite courses to get started React

    \n )}\n
    \n {' '}\n \n {!loggedIn &&

    Please login to access more information about 30 Days Of React challenge

    }\n
    \n
    \n \n
    \n {status}\n
    \n \n
    \n
    \n )\n }\n}\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n margin: '0 auto',\n}\n\n// Footer Component\n// Class component\nclass Footer extends React.Component {\n constructor(props) {\n super(props)\n }\n render() {\n return (\n
    \n
    \n

    Copyright {this.props.date.getFullYear()}

    \n
    \n
    \n )\n }\n}\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n techs: ['HTML', 'CSS', 'JS'],\n message: 'Click show time or Greet people to change me',\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return `${month} ${date}, ${year}`\n }\n handleTime = () => {\n let message = this.showDate(new Date())\n this.setState({ message })\n }\n greetPeople = () => {\n let message = 'Welcome to 30 Days Of React Challenge, 2020'\n this.setState({ message })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 9, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n\n return (\n
    \n {this.state.backgroundColor}\n
    \n\n \n\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Components Folder\n\nInside the src directory will pull all the components\n\n```sh\nsrc\n App.js\n index.js\n components\n -auth\n -Signup.js\n -Signin.js\n -Forgotpassword.js\n -Resetpassord.js\n header\n -Header.js\n footer\n -Footer.js\n assets\n -images\n -icnons\n - fonts\n styles\n -button.js\n -button.scss\n utils\n -random-id.js\n -display-time.js\n -generate-color.js\n shared\n -Button.js\n -InputField.js\n -TextAreaField.js\n```\n\nLet's create components directory inside src and inside components let's create header director. Create Header.js inside the header directory.\n\n```js\n// src/components/header/Header.js\nimport React from 'react'\n\nconst Header = (props) => {\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n}\n\nexport default Header\n```\n\nSimilar to the Header let's move all the components to their respective files.\nAll the CSS files on index.html will moved into styles folder and after that each part has been split its respective file, try to check the styles folder.\n\n## Fragments\n\nFragments are a way to avoid unnecessary parent element in JSX. Let's implement a fragment. We import fragment from react module. As you can see below, we imported React and fragment together by use a comma separation.\n\n```js\nimport React, { Fragment } from 'react'\n\nconst Skills = () => {\n return (\n \n
  • HTML
    • \n
  • CSS
    • \n
  • JavaScript
    • \n     \n )\n}\nconst RequiredSkills = () => {\n return (\n
      \n \n
    \n )\n}\n```\n\nIt is also possible to just extract the fragment module from React as shown below.\n\n```js\nimport React from 'react'\n\nconst Skills = () => {\n return (\n \n
  • HTML
    • \n
  • CSS
    • \n
  • JavaScript
    • \n     \n )\n}\n\nconst RequiredSkills = () => {\n return (\n
      \n \n
    \n )\n}\n```\n\nIn latest version of Reacts it also possible to write without extracting or importing using this signs(<> )\n\n```js\nimport React from 'react'\n\n// Recommended\nconst Skills = () => {\n return (\n <>\n
  • HTML
    • \n
  • CSS
    • \n
  • JavaScript
    • \n \n )\n}\n\nconst RequiredSkills = () => {\n return (\n
      \n \n
    \n )\n}\n```\n\nWhen we make a class-based component we have been using React.Component instead we can just import the component and the code will look more clean. Let's see an example.\n\n```js\nimport React from 'react'\n\n// without importing the Component\n// Not recommended\nclass App extends React.Component {\n render() {\n return

    30 Days of React

    \n }\n}\n```\n\n```js\nimport React, { Component } from 'react'\n\n// This is recommended\nclass App extends Component {\n render() {\n return

    30 Days of React

    \n }\n}\n```\n\nWell done. Time to do some exercises for your brain and muscles.\n\n# Exercises\n\n## Exercises:Level 1\n\n1. What is the importance of React Folder Structure and File Naming\n2. How do you export file\n3. How do you import file\n4. Make a component of module and export it as named or default export\n5. Make a component or module and import it\n6. Change all the components you have to different folder structure\n\n## Exercises:Level 2\n\n1. Make a simple portfolio using the components we have created so far. Implement a dark mode by using the function we wrote on day 8 challenge.\n\n## Exercises: Level 3\n\nComing\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 9](../09_Day_Conditional_Rendering/09_conditional_rendering.md) | [Day 11 >>](../11_Day_Events/11_events.md)\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/README.md", "content": "# 30 Days of React App: Day 10\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n
    \n \n\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/App.js", "content": "import React from 'react'\nimport Header from './components/header/Header'\nimport Main from './components/main/Main'\nimport Footer from './components/footer/Footer'\nimport { countriesData } from './data/countries'\nimport asabenehImage from './assets/images/asabeneh.jpg'\nimport { showDate } from './utils/display-date-and-time'\n\nclass App extends React.Component {\n state = {\n loggedIn: false,\n techs: ['HTML', 'CSS', 'JS'],\n message: 'Click show time or Greet people to change me',\n country: countriesData[1],\n }\n handleLogin = () => {\n this.setState({\n loggedIn: !this.state.loggedIn,\n })\n }\n handleTime = () => {\n let message = showDate(new Date())\n this.setState({ message })\n }\n greetPeople = () => {\n let message = 'Welcome to 30 Days Of React Challenge, 2020'\n this.setState({ message })\n }\n\n render() {\n const data = {\n welcome: '30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: new Date(),\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n const user = { ...data.author, image: asabenehImage }\n\n return (\n
    \n {this.state.backgroundColor}\n
    \n \n\n
    \n
    \n )\n }\n}\n\nexport default App\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/color/HexaColor.js", "content": "import React from 'react'\nimport { hexaColor } from '../../utils/hexadecimal-color-generator'\nconst HexaColor = (props) => {\n return (\n
    \n {hexaColor()}\n
    \n )\n}\n\nHexaColor.propTypes = {}\n\nexport default HexaColor\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/country/Country.js", "content": "import React from 'react'\nconst Country = ({\n country: { name, capital, flag, languages, population, currency },\n}) => {\n const formatedCapital =\n capital.length > 0 ? (\n <>\n Capital: \n {capital}\n \n ) : (\n ''\n )\n const formatLanguage = languages.length > 1 ? `Languages` : `Language`\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    {formatedCapital}

    \n

    \n {formatLanguage}: \n {languages.join(', ')}\n

    \n

    \n Population: \n {population.toLocaleString()}\n

    \n

    \n Currency: \n {currency}\n

    \n
    \n
    \n )\n}\n\nexport default Country\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/footer/Footer.js", "content": "import React from 'react'\nconst Footer = ({ date }) => {\n return (\n
    \n
    \n

    Copyright {date.getFullYear()}

    \n
    \n
    \n )\n}\nexport default Footer\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/header/Header.js", "content": "import React from 'react'\nimport PropTypes from 'prop-types'\nimport { showDate } from '../../utils/display-date-and-time'\n\nconst Header = ({\n data: {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n },\n}) => {\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {showDate(date)}\n
    \n
    \n )\n}\n\nexport default Header\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/main/Main.js", "content": "import React from 'react'\nimport Button from '../shared/Button'\nimport HexaColr from '../color/HexaColor'\nimport Country from '../country/Country'\nimport UserCard from '../user/UserCard'\nimport { buttonStyles } from '../../styles/button-styles'\n\n\n// TechList Component\n// class base component\nclass TechList extends React.Component {\n render() {\n const { techs } = this.props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n }\n}\n\nconst Message = ({ message }) => (\n \n

    {message}

    \n \n)\nconst Login = () => (\n
    \n

    Please Login

    \n
    \n)\nconst Welcome = (props) => (\n
    \n

    Welcome to 30 Days Of React

    \n
    \n)\n\n// Main Component\n// Class Component\nclass Main extends React.Component {\n render() {\n const {\n techs,\n greetPeople,\n handleTime,\n loggedIn,\n handleLogin,\n message,\n country,\n user,\n } = this.props\n console.log(message)\n\n const status = loggedIn ? : \n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n\n \n\n {techs.length === 3 && (\n

    You have all the prerequisite courses to get started React

    \n )}\n
    \n {' '}\n \n {!loggedIn && (\n

    \n Please login to access more information about 30 Days Of React\n challenge\n

    \n )}\n
    \n
    \n \n
    \n {status}\n
    \n \n \n \n \n
    \n
    \n )\n }\n}\n\nexport default Main\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/shared/Button.js", "content": "import React from 'react'\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\nexport default Button\n\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/user/UserCard.js", "content": "import React from 'react'\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n asabeneh image\n\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\nexport default UserCard\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n];" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/index.js", "content": "// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport './styles/index.css'\n\n// class based component\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/button-styles.js", "content": "// CSS styles in JavaScript Object\nexport const buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 22,\n color: 'white',\n margin: '0 auto',\n}\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/common.css", "content": "* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Roboto';\n font-weight: 300;\n color: black;\n overflow-x: hidden;\n font-size: 110%;\n}\n#root {\n min-height: 100%;\n position: relative;\n letter-spacing: 1.25px;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/country.css", "content": "/* Countries*/\n.country {\n max-width: 50rem;\n min-width: 50rem;\n height: 35rem;\n text-align: center;\n margin: 0.75rem auto;\n padding: 2rem;\n border-radius: 0.2rem;\n background: white;\n box-shadow: 0 0.1rem 1rem #cfc9c7;\n}\n\n.country:hover {\n box-shadow: 0 0.1rem 1rem #cfc9c7;\n -webkit-transition: all 0.2s ease-in;\n transform: scale(1.015);\n}\n\n.country_flag {\n height: 12rem;\n width: 20rem;\n text-align: center;\n margin: auto;\n}\n\n.country img {\n display: block;\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n min-width: 100%;\n min-height: 100%;\n border-radius: 0.3rem;\n box-shadow: 0 0 0.6rem 0.2rem rgb(241, 225, 225);\n}\n\n.country_name {\n font-size: 1.6rem;\n color: #ffa500;\n letter-spacing: 0.075rem;\n font-weight: bolder;\n margin: 1rem;\n color: #414141;\n font-weight: 900;\n}\n\n.country p {\n font-size: 1.6rem;\n font-weight: 500;\n padding: 0.2rem;\n color: #747474;\n\n text-align: left;\n letter-spacing: 0.05rem;\n}\n\n.country span {\n font-weight: 600;\n}\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/footer.css", "content": "footer {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/header.css", "content": "header {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/index.css", "content": "/* == General style === */\n/* This CSS has to be broken into small files */\n\n@import './common.css';\n@import './header.css';\n@import './footer.css';\n@import './user-card.css';\n@import './country.css';\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/user-card.css", "content": ".user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/utils/display-date-and-time.js", "content": "export const showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return `${month} ${date}, ${year}`\n}\n" }, { "path": "10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/utils/hexadecimal-color-generator.js", "content": "// Hexadecimal color generator\nexport const hexaColor = () => {\n let str = '0123456789abcdef'\n let color = ''\n for (let i = 0; i < 6; i++) {\n let index = Math.floor(Math.random() * str.length)\n color += str[index]\n }\n return '#' + color\n}" }, { "path": "11_Day_Events/11_events.md", "content": "
    \n

    30 Days Of React: Events

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 10](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md) | [Day 12 >>](../12_Day_Forms/12_forms.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_8.jpg)\n\n- [Events](#events)\n - [What is an event?](#what-is-an-event)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Events\n\n## What is an event?\n\nAn event is an action or occurrence recognized by a software. To make an event more clear let's use the daily activities we do when we use a computer such as clicking on a button, hover on an image, pressing a keyboard, scrolling the mouse wheel and etc. In this section, we will focus only some of the mouse and keyboard events. The react documentation has already a detail note about [events](https://reactjs.org/docs/handling-events.html).\n\nHandling events in React is very similar to handling elements on DOM elements using pure JavaScript. Some of the syntax difference between handling event in React and pure JavaScript:\n\n- React events are named using camelCase, rather than lowercase.\n- With JSX you pass a function as the event handler, rather than a string.\n\nLet's see some examples to understand event handling.\n\nEvent handling in HTML\n\n```html\n\n\n \n \n 30 Days Of React App\n \n \n \n \n \n\n```\n\nIn React, it is slightly different\n\n```js\nimport React from 'react'\n// if it is functional components\nconst App = () => {\n const greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge')\n }\n return \n}\n```\n\n```js\nimport React, { Component } from 'react'\n// if it is functional components\nclass App extends Component {\n greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge')\n }\n render() {\n return \n }\n}\n```\n\nAnother difference between HTML and React event is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:\n\nPlain HTML\n\n```html\n\n Click me\n\n```\n\nHowever, in React it could be as follows:\n\n```js\nimport React, { Component } from 'react'\n// if it is functional components\nclass App extends Component {\n handleClick = () => {\n alert('Welcome to 30 Days Of React Challenge')\n }\n render() {\n return (\n \n Click me\n \n )\n }\n}\n```\n\nEvent handling is a very vast topic and in this challenge we will focus on the most common event types. We may use the following mouse and keyboard events.\n_onMouseMove, onMouseEnter, onMouseLeave, onMouseOut, onClick, onKeyDown, onKeyPress, onKeyUp, onCopy, onCut, onDrag, onChange,onBlur,onInput, onSubmit_\n\nLet's implement some more mouse and keyboard events.\n\n```js\n// index.js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n state = {\n firstName: '',\n message: '',\n key: '',\n }\n handleClick = (e) => {\n // e gives an event object\n // check the value of e using console.log(e)\n this.setState({\n message: 'Welcome to the world of events',\n })\n }\n // triggered whenever the mouse moves\n handleMouseMove = (e) => {\n this.setState({ message: 'mouse is moving' })\n }\n // to get value when an input field changes a value\n handleChange = (e) => {\n this.setState({\n firstName: e.target.value,\n message: e.target.value,\n })\n }\n\n // to get keyboard key code when an input field is pressed\n // it works with input and textarea\n handleKeyPress = (e) => {\n this.setState({\n message:\n `${e.target.value} has been pressed and the keycode is` + e.charCode,\n })\n }\n // Blurring happens when a mouse leave an input field\n handleBlur = (e) => {\n this.setState({ message: 'Input field has been blurred' })\n }\n // This event triggers during a text copy\n handleCopy = (e) => {\n this.setState({\n message: 'Using 30 Days Of React for commercial purpose is not allowed',\n })\n }\n render() {\n return (\n
    \n

    Welcome to the World of Events

    \n\n \n \n

    \n Check copy right permission by copying this text\n

    \n\n

    {this.state.message}

    \n \n \n
    \n\n \n \n\n
    \n
    \n \n \n
    \n\n
    \n \n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\n// we render the JSX element using the ReactDOM package\nReactDOM.render(, rootElement)\n```\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is an event?\n2. What is the different between an HTML element event and React event?\n3. Write at least 4 keyboard events?\n4. Write at least 8 mouse events?\n5. What are the most common mouse and keyboard events?\n6. Write an event specific to input element?\n7. Write an event specific to form element?\n8. Display the coordinate of the view port when a mouse is moving on the body?\n9. What is the difference between onInput, onChange and onBlur?\n10. Where do we put the onSubmit event ?\n\n## Exercises: Level 2\n\nImplement the following using onMouseEnter event\n\n![On mouse enter event](../images/react_event_on_mouse_enter.gif)\n\n## Exercises: Level 3\n\nComing\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 10](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md) | [Day 12 >>](../12_Day_Forms/12_forms.md)\n" }, { "path": "11_Day_Events/11_events_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "11_Day_Events/11_events_boilerplate/README.md", "content": "# 30 Days of React App: Day 11\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "11_Day_Events/11_events_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "11_Day_Events/11_events_boilerplate/public/index.html", "content": "\n\n \n \n \n \n 30 Days Of React App\n \n \n
    \n \n\n" }, { "path": "11_Day_Events/11_events_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "11_Day_Events/11_events_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "11_Day_Events/11_events_boilerplate/src/index.js", "content": "// index.js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n state = {\n firstName: '',\n message: '',\n key: '',\n }\n handleClick = (e) => {\n // e gives an event object\n // check the value of e using console.log(e)\n this.setState({\n message: 'Welcome to the world of events',\n })\n }\n // triggered whenever the mouse moves\n handleMouseMove = (e) => {\n this.setState({ message: 'mouse is moving' })\n }\n // to get value when an input field changes a value\n handleChange = (e) => {\n this.setState({\n firstName: e.target.value,\n message: e.target.value,\n })\n }\n\n // to get keyboard key code when an input field is pressed\n // it works with input and textarea\n handleKeyPress = (e) => {\n this.setState({\n message:\n `${e.target.value} has been pressed and the keycode is` + e.charCode,\n })\n }\n // Blurring happens when a mouse leave an input field\n handleBlur = (e) => {\n this.setState({ message: 'Input field has been blurred' })\n }\n // This event triggers during a text copy\n handleCopy = (e) => {\n this.setState({\n message: 'Using 30 Days Of React for commercial purpose is not allowed',\n })\n }\n render() {\n return (\n
    \n

    Welcome to the World of Events

    \n\n \n \n

    \n Check copy right permission by copying this text\n

    \n\n

    {this.state.message}

    \n \n \n
    \n\n \n \n\n
    \n
    \n \n \n
    \n\n
    \n \n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "12_Day_Forms/12_forms.md", "content": "
    \n

    30 Days Of React: Forms

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_12.jpg)\n\n- [Forms](#forms)\n - [Getting data from an input field](#getting-data-from-an-input-field)\n - [Getting multiple input data from form](#getting-multiple-input-data-from-form)\n - [Get data from different input field types](#get-data-from-different-input-field-types)\n - [Form Validation](#form-validation)\n - [What is validation?](#what-is-validation)\n - [What is the purpose of validation](#what-is-the-purpose-of-validation)\n - [Validation Types](#validation-types)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Forms\n\nForm is used to collect data from a user. Once in a while we use form to fill our information on a paper or on a website. Either to sign up, sign in or to apply for a job we fill different form fields to submit our data to remote database. We encounter different form fields when we fill a form such as simple text, email, password, telephone, date, checkbox, radio button, option selection and text area field. Currently, HTML5 has provide quite a lot of field types. You may have a look at the following available HTML5 input types.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\nAnother HTML fields to get data from a form are textarea and select with options elements.\n\n```html\n\n\n\n```\n\nNow, you know most of the fields we need to get data from a form. Let's start with an input with type text field. In the previous day, we saw different types of events and today we will focus on more of _onChange_ event type which triggers whenever an input field data changes. Input field has by default a memory to store input data but in this section we control that using state and we implement a controlled input. Today we will implement a controlled input. We will cover uncontrolled input in a separate section.\n\n## Getting data from an input field\n\nSo far we did not get any data from input field. Now, it is time to learn how to get data from an input field. We need an input field, event listener (onChange) and state to get data from a controlled input. See the example below. The h1 element below the input tag display what we write on the input. Check live [demo](https://codepen.io/Asabeneh/full/OJVpyqm).\n\nThe input element has many attributes such as value, name, id, placeholder, type and event handler. In addition, we can link a label and an input field using an id of input field and htmlFor of the label.If label and input are linked it will focus the input when we click on label. Look at the example give below.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n // declaring state\n // initial state\n state = {\n firstName: '',\n }\n handleChange = (e) => {\n const value = e.target.value\n this.setState({ firstName: value })\n }\n\n render() {\n /*\n accessing the state value and \n this value will injected to the input in the value attribute\n */\n\n const firstName = this.state.firstName\n return (\n
    \n \n \n

    {this.state.firstName}

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe usually use form to handle user information. Let us move to form section and make use the form element.\n\n## Getting multiple input data from form\n\nIn this section we will develop a small form which collect user information. Our user is a student. We use a parent form element and certain number of input elements to collect user information. In addition to that we will have event listener for the form (onSubmit) and for the inputs (onChange). See the following example try to see the commonts too. You can also check the live [demo](https://codepen.io/Asabeneh/full/eYNvJda).\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nclass App extends Component {\n // declaring initial state\n state = {\n firstName: '',\n lastName: '',\n country: '',\n title: '',\n }\n handleChange = (e) => {\n /*\n we can get the name and value like this: e.target.name, e.target.value\n but we can also destructure name and value from e.target\n const name = e.target.name\n const value = e.target.value\n */\n const { name, value } = e.target\n // [variablename] to use a variable name as a key in an object\n // name refers to the name attribute of the input elements\n this.setState({ [name]: value })\n }\n handleSubmit = (e) => {\n /* \n e.preventDefault()\n stops the default behavior of form element\n specifically refreshing of page\n */\n e.preventDefault()\n\n /*\n the is the place where we connect backend api \n to send the data to the database\n */\n\n console.log(this.state)\n }\n\n render() {\n // accessing the state value by destrutcturing the state\n const { firstName, lastName, title, country } = this.state\n return (\n
    \n

    Add Student

    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n\n \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nThe above form handles only text types but do have different input field types. Let's do another form which handle all the different input field types.\n\n## Get data from different input field types\n\n```js\n// index.js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst options = [\n {\n value: '',\n label: '-- Select Country--',\n },\n {\n value: 'Finland',\n label: 'Finland',\n },\n {\n value: 'Sweden',\n label: 'Sweden',\n },\n {\n value: 'Norway',\n label: 'Norway',\n },\n {\n value: 'Denmark',\n label: 'Denmark',\n },\n]\n\n// mapping the options to list(array) of JSX options\n\nconst selectOptions = options.map(({ value, label }) => (\n \n))\n\nclass App extends React.Component {\n // declaring state\n state = {\n firstName: '',\n lastName: '',\n email: '',\n country: '',\n tel: '',\n dateOfBirth: '',\n favoriteColor: '',\n weight: '',\n gender: '',\n file: '',\n bio: '',\n skills: {\n html: false,\n css: false,\n javascript: false,\n },\n }\n handleChange = (e) => {\n /*\n we can get the name and value like: e.target.name, e.target.value\n Wwe can also destructure name and value from e.target\n const name = e.target.name\n const value = e.target.value\n */\n const { name, value, type, checked } = e.target\n /*\n [variablename] we can make a value stored in a certain variable could be a key for an object, in this case a key for the state\n */\n\n if (type === 'checkbox') {\n this.setState({\n skills: { ...this.state.skills, [name]: checked },\n })\n } else if (type === 'file') {\n console.log(type, 'cehck here')\n this.setState({ [name]: e.target.files[0] })\n } else {\n this.setState({ [name]: value })\n }\n }\n handleSubmit = (e) => {\n /*\n e.preventDefault()\n stops the default behavior of form element\n specifically refreshing of page\n */\n e.preventDefault()\n const {\n firstName,\n lastName,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills,\n } = this.state\n\n const formattedSkills = []\n for (const key in skills) {\n console.log(key)\n if (skills[key]) {\n formattedSkills.push(key.toUpperCase())\n }\n }\n const data = {\n firstName,\n lastName,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills: formattedSkills,\n }\n /*\n the is the place where we connect backend api \n to send the data to the database\n */\n console.log(data)\n }\n\n render() {\n // accessing the state value by destrutcturing the state\n const {\n firstName,\n lastName,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n } = this.state\n return (\n
    \n

    Add Student

    \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n\n
    \n

    Gender

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n

    Select your skills

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Form Validation\n\n## What is validation?\n\nThe action or process of checking or proving the validity or accuracy of something in this case data.\n\n## What is the purpose of validation\n\nThe main purpose to validation is to get a desired data from users. In addition, to prevent malicious users and data.\n\n## Validation Types\n\nValidation can be done in client side or sever side. At the moment, we are using React which is a front end technology and we use client side validation.A validation can implement using HTML5 built-in validation or using JavaScript(using regular expression).\n\nIn the following snippet of code, a validation has been implemented the first field. Try to understand how it works. The onBlur event has been used to check validity when the input is not focused.\n\n```js\n// index.js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst options = [\n {\n value: '',\n label: '-- Select Country--',\n },\n {\n value: 'Finland',\n label: 'Finland',\n },\n {\n value: 'Sweden',\n label: 'Sweden',\n },\n {\n value: 'Norway',\n label: 'Norway',\n },\n {\n value: 'Denmark',\n label: 'Denmark',\n },\n]\n\n// mapping the options to list(array) of JSX options\n\nconst selectOptions = options.map(({ value, label }) => (\n \n))\n\nclass App extends Component {\n // declaring state\n state = {\n firstName: '',\n lastName: '',\n email: '',\n country: '',\n tel: '',\n dateOfBirth: '',\n favoriteColor: '',\n weight: '',\n gender: '',\n file: '',\n bio: '',\n skills: {\n html: false,\n css: false,\n javascript: false,\n },\n touched: {\n firstName: false,\n lastName: false,\n },\n }\n handleChange = (e) => {\n /*\n we can get the name and value like: e.target.name, e.target.value\n Wwe can also destructure name and value from e.target\n const name = e.target.name\n const value = e.target.value\n */\n const { name, value, type, checked } = e.target\n /*\n [variablename] we can make a value stored in a certain variable could be a key for an object, in this case a key for the state\n */\n\n if (type === 'checkbox') {\n this.setState({\n skills: { ...this.state.skills, [name]: checked },\n })\n } else if (type === 'file') {\n this.setState({ [name]: e.target.files[0] })\n } else {\n this.setState({ [name]: value })\n }\n }\n handleBlur = (e) => {\n const { name, value } = e.target\n this.setState({ touched: { ...this.state.touched, [name]: true } })\n }\n validate = () => {\n // Object to collect error feedback and to display on the form\n const errors = {\n firstName: '',\n }\n\n if (\n (this.state.touched.firstName && this.state.firstName.length < 3) ||\n (this.state.touched.firstName && this.state.firstName.length > 12)\n ) {\n errors.firstName = 'First name must be between 2 and 12'\n }\n return errors\n }\n handleSubmit = (e) => {\n /*\n e.preventDefault()\n stops the default behavior of form element \n specifically refreshing of page\n */\n e.preventDefault()\n\n const {\n firstName,\n lastName,\n email,\n country,\n gender,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n bio,\n file,\n skills,\n } = this.state\n\n const formattedSkills = []\n for (const key in skills) {\n console.log(key)\n if (skills[key]) {\n formattedSkills.push(key.toUpperCase())\n }\n }\n const data = {\n firstName,\n lastName,\n email,\n country,\n gender,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n bio,\n file,\n skills: formattedSkills,\n }\n /*\n the is the place where we connect backend api\n to send the data to the database\n */\n console.log(data)\n }\n\n render() {\n // accessing the state value by destrutcturing the state\n // the noValidate attribute on the form is to stop the HTML5 built-in validation\n\n const { firstName } = this.validate()\n return (\n
    \n

    Add Student

    \n
    \n
    \n
    \n \n
    \n {firstName}\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n\n
    \n

    Gender

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n

    Select your skills

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is the importance of form?\n2. How many input types do you know?\n3. Mention at least four attributes of an input element\n4. What is the importance of htmlFor?\n5. Write an input type which is not given in the example if there is?\n6. What is a controlled input?\n7. What do you need to write a controlled input?\n8. What event type do you use to listen changes on an input field?\n9. What is the value of a checked checkbox?\n10. When do you use onChange, onBlur, onSubmit?\n11. What is the purpose of writing e.preventDefault() inside the submit handler method?\n12. How do you bind data in React? The first input field example is data binding in React.\n13. What is validation?\n14. What is the event type you use to listen when an input changes?\n15. What are event types do you use to validate an input?\n\n## Exercises: Level 2\n\n1. Validate the form given above (a gif image or a video will be provided later). First try to validate without using any library then try it with [validator.js](https://www.npmjs.com/package/validator).\n\n## Exercises: Level 3\n\nComing ..\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md)\n" }, { "path": "12_Day_Forms/12_forms_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "12_Day_Forms/12_forms_boilerplate/README.md", "content": "# 30 Days of React App: Day 12\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "12_Day_Forms/12_forms_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "12_Day_Forms/12_forms_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "12_Day_Forms/12_forms_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "12_Day_Forms/12_forms_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "12_Day_Forms/12_forms_boilerplate/src/index.js", "content": "// index.js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst options = [\n {\n value: '',\n label: '-- Select Country--',\n },\n {\n value: 'Finland',\n label: 'Finland',\n },\n {\n value: 'Sweden',\n label: 'Sweden',\n },\n {\n value: 'Norway',\n label: 'Norway',\n },\n {\n value: 'Denmark',\n label: 'Denmark',\n },\n]\n\n// mapping the options to list(array) of JSX options\n\nconst selectOptions = options.map(({ value, label }) => (\n \n))\n\nclass App extends Component {\n // declaring state\n state = {\n firstName: '',\n lastName: '',\n email: '',\n country: '',\n tel: '',\n dateOfBirth: '',\n favoriteColor: '',\n weight: '',\n gender: '',\n file: '',\n bio: '',\n skills: {\n html: false,\n css: false,\n javascript: false,\n },\n touched: {\n firstName: false,\n lastName: false,\n },\n }\n handleChange = (e) => {\n /*\n // we can get the name and value like this but we can also destructure it from e.target\n const name = e.target.name\n const value = e.target.value\n */\n const { name, value, type, checked } = e.target\n // [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state\n\n if (type === 'checkbox') {\n this.setState({\n skills: { ...this.state.skills, [name]: checked },\n })\n } else if (type === 'file') {\n this.setState({ [name]: e.target.files[0] })\n } else {\n this.setState({ [name]: value })\n }\n }\n handleBlur = (e) => {\n const { name, value } = e.target\n this.setState({ touched: { ...this.state.touched, [name]: true } })\n }\n validate = () => {\n // Object to collect error feedback and to display on the form\n const errors = {\n firstName: '',\n }\n\n if (\n (this.state.touched.firstName && this.state.firstName.length < 3) ||\n (this.state.touched.firstName && this.state.firstName.length > 12)\n ) {\n errors.firstName = 'First name must be between 2 and 12'\n }\n return errors\n }\n handleSubmit = (e) => {\n // stops the default behavior of form element specifically refreshing of page\n e.preventDefault()\n\n const {\n firstName,\n lastName,\n email,\n country,\n gender,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n bio,\n file,\n skills,\n } = this.state\n\n const formattedSkills = []\n for (const key in skills) {\n console.log(key)\n if (skills[key]) {\n formattedSkills.push(key.toUpperCase())\n }\n }\n const data = {\n firstName,\n lastName,\n email,\n country,\n gender,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n bio,\n file,\n skills: formattedSkills,\n }\n console.log(data)\n }\n\n render() {\n // accessing the state value by destrutcturing the state\n // the noValidate attribute on the form is to stop the HTML5 built-in validation\n\n const { firstName } = this.validate()\n return (\n
    \n

    Add Student

    \n
    \n
    \n
    \n \n {' '}\n
    \n {firstName}\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n\n
    \n

    Gender

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n

    Select your skills

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md", "content": "
    \n

    30 Days Of React: Uncontrolled Component

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>]()\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_13.jpg)\n\n- [Uncotrolled Components](#uncotrolled-components)\n - [Getting data from an uncontrolled input](#getting-data-from-an-uncontrolled-input)\n - [Getting multiple input data from form](#getting-multiple-input-data-from-form)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n\n# Uncotrolled Components\n\nIn the previous day challenge we have covered controlled inputs. In react most of the time we use controlled inputs as recommended on the official [documentation of React](https://reactjs.org/docs/uncontrolled-components.html).\n\nTo write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM. In uncontrolled input we get data from input fields like traditional HTML form data handling.\n\nAn example of uncontrolled component\n\n## Getting data from an uncontrolled input\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n firstName = React.createRef()\n\n handleSubmit = (e) => {\n e.preventDefault()\n console.log(this.firstName.current.value)\n }\n\n render() {\n return (\n
    \n
    \n \n \n \n \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Getting multiple input data from form\n\nWe can grab multiple input data from DOM. We are not directly targeting the DOM but React is getting data from DOM using ref.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n firstName = React.createRef()\n lastName = React.createRef()\n country = React.createRef()\n title = React.createRef()\n\n handleSubmit = (e) => {\n // stops the default behavior of form element specifically refreshing of page\n e.preventDefault()\n\n console.log(this.firstName.current.value)\n console.log(this.lastName.current.value)\n console.log(this.title.current.value)\n console.log(this.country.current.value)\n\n const data = {\n firstName: this.firstName.current.value,\n lastName: this.lastName.current.value,\n title: this.title.current.value,\n country: this.country.current.value,\n }\n // the is the place we connect backend api to send the data to the database\n console.log(data)\n }\n\n render() {\n return (\n
    \n

    Add Student

    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n\n \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nMost of the time we use controlled input instead of uncontrolled input. In case if you want to target some element on the DOM you will use ref to get the content of that element. Don't touch directly using pure JavaScript. When you develop a React application do not touch the DOM directly because React has its own way of handling the DOM manipulation.\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is a controlled input?\n2. What is an uncontrolled input\n3. How do you get a content of a certain HTML element in React ?\n4. Why it is not a good idea to touch the DOM directly in React ?\n5. What is most frequently used in React ? Controlled or Uncontrolled input.\n6. What do you need to write uncontrolled input?\n7. Does state require to write uncontrolled input?\n8. When do you use uncontrolled input?\n9. When do you use controlled input?\n10. Do you use a controlled or uncontrolled input to validate form input fields?\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>]()\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/README.md", "content": "# 30 Days of React App: Day 13\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n firstName = React.createRef()\n lastName = React.createRef()\n country = React.createRef()\n title = React.createRef()\n\n handleSubmit = (e) => {\n // stops the default behavior of form element specifically refreshing of page\n e.preventDefault()\n\n console.log(this.firstName.current.value)\n console.log(this.lastName.current.value)\n console.log(this.title.current.value)\n console.log(this.country.current.value)\n\n const data = {\n firstName: this.firstName.current.value,\n lastName: this.lastName.current.value,\n title: this.title.current.value,\n country: this.country.current.value,\n }\n // the is the place we connect backend api to send the data to the database\n console.log(data)\n }\n\n render() {\n return (\n
    \n

    Add Student

    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n\n \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles.md", "content": "
    \n

    30 Days Of React:Component Life Cycles

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 13](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md) | [Day 15 >>](../15_Third_Party_Packages/15_third_party_packages.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_14.jpg)\n\n- [Component Life Cycles](#component-life-cycles)\n - [What is component life cycle](#what-is-component-life-cycle)\n - [Mounting](#mounting)\n - [Contructor](#contructor)\n - [getDerivedStateFromPros](#getderivedstatefrompros)\n - [Render](#render)\n - [ComponentDidMount](#componentdidmount)\n - [Updating](#updating)\n - [getDerivedStateFromProps](#getderivedstatefromprops)\n - [shouldComponentUpdate](#shouldcomponentupdate)\n - [render](#render-1)\n - [componentDidUpdate](#componentdidupdate)\n - [Unmounting](#unmounting)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Component Life Cycles\n\n## What is component life cycle\n\nComponent life cycle is the process of mounting, updating and destroying a component in a React application. You can associate a component life cycle with the process of human growth:birth, adult, elderly and death.\nIn React component also a component can be mounted or rendered the first time, can be updated by changing the data and also can be destroyed whenever it is not needed. In React each component has three main phases:\n\n- Mounting\n- Updating\n- Unmounting\n\n## Mounting\n\nRendering or putting React component into the DOM is called mounting. The following built-in methods run in the given order during mounting of a React component.\n\n1. constructor()\n2. static getDerivedStateFromProps()\n3. render()\n4. componentDidMount()\n\nWhen we have been making a class-based component we used a built-in render method and it is required in all class-based components but other methods are optional. See the order of execution of the different methods by running the following snippet of codes.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: '',\n }\n }\n\n static getDerivedStateFromProps(props, state) {\n console.log(\n 'I am getDerivedStateFromProps and I will be the second to run.'\n )\n return null\n }\n componentDidMount() {\n console.log('I am componentDidMount and I will be last to run.')\n }\n\n render() {\n console.log('I am render and I will be the third to run.')\n return (\n
    \n

    React Component Life Cycle

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Contructor\n\nNowadays we write class based-component without a constructor and we can write the state also outside the constructor. In older version React we the state used be always inside the constructor.\n\nThe constructor() method is executed before any other methods, when component is initiated and it is the place where to set the initial state and other values.\nIn class we use constructor parameter to inherit from parents and in React to the constructor take a props parameter and the super method has to be also called.\nLook at the snippet of code about constructor and state.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: '',\n }\n }\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    The constructor is the first to Run

    \n

    Author:{this.state.firstName}

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### getDerivedStateFromPros\n\nAs we can understand from the name, this method derives a state from props. The getDerivedStateFromProps() method is called right before rendering the component in the DOM. This the right place to set the state object based on the initial props.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst User = ({ firstName }) => (\n
    \n

    {firstName}

    \n
    \n)\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n // we can write state inside or outside the constructor\n // if is written outside the constructor it does not need the keyword this\n this.state = {\n firstName: 'John',\n }\n }\n static getDerivedStateFromProps(props, state) {\n console.log(\n 'I am getDerivedStateFromProps and I will be the second to run.'\n )\n return { firstName: props.firstName }\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    getDerivedStateFromProps

    \n \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Render\n\nThe render method is a required method when we create a class-based component. The render method is where we return JSX. The render methods render whenever there is change in state. Do not set your state inside render method.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst User = ({ firstName }) => (\n
    \n

    {firstName}

    \n
    \n)\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n // we can write state inside or outside the constructor\n // if is written outside the constructor it does not need the keyword this\n this.state = {\n firstName: 'John',\n }\n }\n render() {\n // Never do this\n // Do not reset inside the render method, create a method to reset the state\n\n return (\n
    \n

    React Component Life Cycle

    \n

    Render method

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### ComponentDidMount\n\nAs we can understand the name of the method that this method called after component is render. This a place place to setting time interval and calling API. Look at the following setTimeout implementation in componentDidMount method.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n }\n }\n componentDidMount() {\n console.log('I am componentDidMount and I will be last to run.')\n // after 3 seconds it resets the state\n setTimeout(() => {\n this.setState({\n firstName: 'Asabeneh',\n })\n }, 3000)\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    componentDidMount Method

    \n {this.state.firstName}\n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIn the above snippet of code, we saw how to implement setTimeout inside a componentDidMount method. In next example, we will implement an API call using fetch.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n data: [],\n }\n }\n\n componentDidMount() {\n console.log('I am componentDidMount and I will be last to run.')\n const API_URL = 'https://restcountries.eu/rest/v2/all'\n fetch(API_URL)\n .then((response) => {\n return response.json()\n })\n .then((data) => {\n console.log(data)\n this.setState({\n data,\n })\n })\n .catch((error) => {\n console.log(error)\n })\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n
    \n
    \n {' '}\n {country.name}{' '}\n
    \n
    \n

    {country.name}

    \n

    Capital: {country.capital}

    \n

    Population: {country.population}

    \n
    \n
    \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nSometimes it is better to have a separate method to render the data. See the example below:\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n data: [],\n }\n }\n\n componentDidMount() {\n console.log('I am componentDidMount and I will be last to run.')\n const API_URL = 'https://restcountries.eu/rest/v2/all'\n fetch(API_URL)\n .then((response) => {\n return response.json()\n })\n .then((data) => {\n console.log(data)\n this.setState({\n data,\n })\n })\n .catch((error) => {\n console.log(error)\n })\n }\n renderCountries = () => {\n return this.state.data.map((country) => {\n return (\n
    \n
    \n {' '}\n {country.name}{' '}\n
    \n
    \n

    {country.name}

    \n

    Population: {country.population}

    \n
    \n
    \n )\n })\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    {this.renderCountries()}
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Updating\n\nAfter a component has been mounted on the DOM, it can be updated when a state or props change. An update of a React component can be caused by changes to props or state . These methods are called in the following order when a component is being re-rendered:\n\n1. static getDerivedStateFromProps()\n2. shouldComponentUpdate()\n3. render()\n4. getSnapshotBeforeUpdate()\n5. componentDidUpdate()\n\n### getDerivedStateFromProps\n\nSimilar to the mounting phase, getDerivedStateFromProps can be also called in the updating phase. The getDerivedStateFromProps is the first method that is called when a component gets updated.\n\n### shouldComponentUpdate\n\nThe shouldComponentUpdate() built-in life cycle method should return a boolean. If this method does not return true the application will not update.\n\nIf the method does not return true the application will never update. This can be used for instance to block use when it reaches to a certain point(game, subscription) or may be to block a certain user.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n data: [],\n }\n }\n\n shouldComponentUpdate(nexProps, nextState) {\n console.log(nextProps, nextState)\n // if the return is true, the application will never update.\n return true\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nFor instance, if we want to stop doing challenge after 30 days we can increment the day from 1 to 30 and we can block the application at day 30.\nLook the example.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n day: 1,\n }\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n console.log(nextProps, nextState)\n console.log(nextState.day)\n if (nextState.day > 31) {\n return false\n } else {\n return true\n }\n }\n // the doChallenge increment the day by one\n doChallenge = () => {\n this.setState({\n day: this.state.day + 1,\n })\n }\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n \n

    Challenge: Day {this.state.day}

    \n {this.state.congratulate &&

    {this.state.congratulate}

    }\n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### render\n\nAs we have mentioned it on the mounting phase of the component, the render() method is called when a component gets updated. It has to re-render the HTML to the DOM, with the new changes.\n\n### componentDidUpdate\n\nThe componentDidUpdate method takes two parameters: the prevProps and prevState. It is called after the component is updated in the DOM.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n data: [],\n }\n }\n componentDidUpdate(prevProps, prevState) {\n console.log(prevState, prevProps)\n }\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet's use the above two life cycle methods together.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n day: 1,\n congratulate: '',\n }\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n console.log(nextProps, nextState)\n console.log(nextState.day)\n if (nextState.day > 31) {\n return false\n } else {\n return true\n }\n }\n\n doChallenge = () => {\n this.setState({\n day: this.state.day + 1,\n })\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevState.day == 30) {\n this.setState({\n congratulate: 'Congratulations,Challenge has been completed',\n })\n }\n console.log(prevState, prevProps)\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n \n

    Challenge: Day {this.state.day}

    \n {this.state.congratulate &&

    {this.state.congratulate}

    }\n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Unmounting\n\nThe final phase in the lifecycle of a component is unmounting. The unmounting phase removes component from the DOM.\nThe componentWillUnmount method is the only built-in method that gets called when a component is unmounted.\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is component life cycles\n2. What is the purpose of life cycles\n3. What are the three stages of a component life cycle\n4. What does mounting means?\n5. What does updating means\n6. What does unmounting means?\n7. What is the most common built-in mounting life cycle method?\n8. What are the mounting life cycle methods?\n9. What are the updating life cycle methods?\n10. What is the unmounting life cycle method?\n\n## Exercises: Level 2\n\nComing\n\n## Exercises: Level 3\n\nComing\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 13](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md) | [Day 15 >>](../15_Third_Party_Packages/15_third_party_packages.md)\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/README.md", "content": "# 30 Days of React App: Day 14\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n data: [],\n }\n }\n\n componentDidMount() {\n console.log('I am componentDidMount and I will be last to run.')\n const API_URL = 'https://restcountries.eu/rest/v2/all'\n fetch(API_URL)\n .then((response) => {\n return response.json()\n })\n .then((data) => {\n console.log(data)\n this.setState({\n data,\n })\n })\n .catch((error) => {\n console.log(error)\n })\n }\n renderCountries = () => {\n return this.state.data.map((country) => {\n return (\n
    \n
    \n {' '}\n {country.name}{' '}\n
    \n
    \n

    {country.name}

    \n

    Population: {country.population}

    \n
    \n
    \n )\n })\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    {this.renderCountries()}
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "15_Third_Party_Packages/15_third_party_packages.md", "content": "
    \n

    30 Days Of React:Third Party Packages

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 14](../14_Day_Component_Life_Cycles/14_component_life_cycles.md) | [Day 16 >>](../16_Higher_Order_Component/16_higher_order_component.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_15.jpg)\n\n- [Third Party Packages](#third-party-packages)\n - [NPM or Yarn](#npm-or-yarn)\n - [node-sass](#node-sass)\n - [CSS modules](#css-modules)\n - [axios](#axios)\n - [react-icons](#react-icons)\n - [moment](#moment)\n - [styled-components](#styled-components)\n - [reactstrap](#reactstrap)\n - [lodash](#lodash)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Third Party Packages\n\nThere are more than 1.4M JavaScript packages on npm registry. By now there is a package almost for every kind of problem. We do not have to create the wheel instead we have to know how to use the wheel. In this section, we will learn how to use npm packages and also we will implement most common package for React applications. As of October 10, 2020, the npm registry popular packages, total number of packages, downloads per week and downloads per month seems as shown below.\n\n![NPM packages](../images/npm_package_day_15.png)\n\nIn one way or the other you many need the following packages in your React applications. Specially node-sass, moment and axios are important for some projects.\n\n- [node-sass](https://www.npmjs.com/package/node-sass)\n- [moment](https://www.npmjs.com/package/moment)\n- [axios](https://www.npmjs.com/package/axios)\n- [react-icons](https://react-icons.github.io/react-icons/)\n- [styled-components](https://styled-components.com/)\n- [reactstrap](https://reactstrap.github.io/)\n- [lodash](https://www.npmjs.com/package/lodash)\n- [uuid](https://www.npmjs.com/package/uuid)\n\n## NPM or Yarn\n\nYou can use either npm or yarn to install packages. If you want to use [yarn](https://yarnpkg.com) you have install it separately. I would recommend you to stick in one of the package. Don't use both package management tools in one application at the same time.\n\nLet's see how to install packages to an application. First, we go to the project directory and write the following command.\n\n```sh\n// syntax, we can use i or install\nnpm i package-name\n// or\nyarn add package-name\n```\n\n### node-sass\n\nSass is a CSS preprocess which allows to write CSS function, nesting and many more. Let's install node-sass to make use of the power of Sass.\n\nUsing npm:\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install node-sass\n```\n\nUsing yarn:\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ yarn add node-sass\n```\n\nAfter installing node-sass you can start using Sass in React. Create a styles folder and inside this folder create test.scss. Import this file to the component you are working or index.js. You don't need import the node-sass to the component.\n\n```css\n/* ./styles/header.scss */\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n margin: 0;\n}\n```\n\n```js\n// Header.js\nimport React from 'react'\nimport './styles/header.scss\nconst Header = () = (\n
    \n
    \n

    30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Instructor: Asabeneh Yetayeh

    \n Oct 15, 2020\n
    \n
    \n)\n\nexport default Header\n```\n\n```js\n// App.js\n\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport './styles/header.scss\n\nclass App extends Component {\n render() {\n return (\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### CSS modules\n\nIn addition to Sass, it is good to know how to use CSS modules in React. We do not have to install a separate package for a CSS module to use CSS module in React applications. CSS module can be used with Pure CSS or with Sass. The naming convention for CSS module is a specific name followed by dot and module(test.module.css or test.module.scss)\n\nNaming:\n\n```js\n// naming for Sass\n// naming for CSS\n;[name].module.scss[name].module.css\n```\n\n```css\n/* ./styles/header.module.scss */\n.header {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n margin: 0;\n}\n.header-wrapper {\n font-weight:500\n border: 5px solid orange;\n}\n```\n\n```js\n// Header.js\nimport React from 'react'\nimport headerStyles from './styles/header.module.scss\n// We can all destructure the class name\nconst {header, headerWrapper} = headerStyles\nconst Header = () = (\n
    \n
    \n

    30 Days Of React

    \n

    Getting Started React

    \n

    JavaScript Library

    \n

    Instructor: Asabeneh Yetayeh

    \n Oct 15, 2020\n
    \n
    \n)\n\nexport default Header\n```\n\n```js\n// App.js\n\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport './styles/header.scss\n\nclass App extends Component {\n render() {\n return (\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### axios\n\nAxios is a JavaScript library which can make HTTP requests to fetch data. In this section we will see on a get request. However, it is possible to do all the request types using [axios](https://github.com/axios/axios) (GET, POST, PUT, PATCH, DELETE).\n\nUsing npm:\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install axios\n```\n\nUsing yarn:\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ yarn add axios\n```\n\n```js\nimport React, { Component } from 'react'\n// axios is a package which\n// send requests to a server to fetch data\nimport axios from 'axios'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n state = {\n data: [],\n }\n componentDidMount() {\n const API_URL = 'https://restcountries.eu/rest/v2/all'\n axios\n .get(API_URL)\n .then((response) => {\n this.setState({\n data: response.data,\n })\n })\n .catch((error) => {\n console.log(error)\n })\n }\n\n renderCountries = () => {\n return this.state.data.map((country) => {\n const languageOrLanguages =\n country.languages.length > 1 ? 'Langauges' : 'Language'\n const formatLanguages = country.languages\n .map(({ name }) => name)\n .join(', ')\n return (\n
    \n
    \n {' '}\n {country.name}{' '}\n
    \n
    \n

    {country.name}

    \n

    Capital: {country.capital}

    \n

    \n {languageOrLanguages}: {formatLanguages}\n

    \n

    Population: {country.population}

    \n
    \n
    \n )\n })\n }\n render() {\n return (\n
    \n

    Fetching Data Using Axios

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    {this.renderCountries()}
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe can use axios with await and async functions. In order to implement await and async we need to have separate function outside the componentDidMount. If we implement await and async the error has to be handled by try and catch.\n\n### react-icons\n\nIcons are integral part of a website. To get different SVG icons\n\nUsing npm:\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install react-icons\n```\n\nUsing yarn:\n\n```sh\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ yarn add react-icons\n```\n\n```js\nimport React, { Component } from 'react'\nimport axios from 'axios'\nimport ReactDOM from 'react-dom'\nimport moment from 'moment'\nimport {\n TiSocialLinkedinCircular,\n TiSocialGithubCircular,\n TiSocialTwitterCircular,\n} from 'react-icons/ti'\n\nconst Footer = () => (\n
    \n

    30 Days Of React

    \n
    \n \n \n \n
    \n
    \n Copyright © {new Date().getFullYear()} \n
    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n
    \n

    Welcome to the world of Icons

    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### moment\n\nMoment is a small JavaScript library which gives us different time formats.\n\n```sh\nnpm install moment\n```\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends Component {\n render() {\n return (\n
    \n

    How to use moment

    \n

    This challenge was started {moment('2020-10-01').fromNow()}

    \n

    The challenge will be over in {moment('2020-10-30').fromNow()}

    \n

    Today is {moment(new Date()).format('MMMM DD, YYYY HH:mm')}

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### styled-components\n\nIt uses a tagged template literals to style a component. It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport styled from 'styled-components'\n\nconst Title = styled.h1`\n font-size: 70px;\n font-weight: 300;\n`\nconst Header = styled.header`\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n margin: 0;\n`\n\nclass App extends Component {\n render() {\n return (\n
    \n
    \n
    \n 30 Days Of React\n

    Getting Started React

    \n

    JavaScript Library

    \n

    Instructor: Asabeneh Yetayeh

    \n Oct 15, 2020\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### reactstrap\n\nThe [reactstrap](https://reactstrap.github.io/) package allows to use a component with bootstrap.\n\n### lodash\n\nAccording to the official lodash documentation, 'A modern JavaScript utility library delivering modularity, performance & extras.'\n\nTry to also learn how to use the package _classnames_ and _validator_.\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is a package?\n2. What is a third party package ?\n3. Do you have to use third party packages?\n4. How do you know the popularity and stability of a third party package?\n5. How many JavaScript packages are there on the npm registry?\n6. How do you install a third party package?\n7. What packages do you use most frequently?\n8. What package do you use to fetch data?\n9. What is the purpose of classnames package?\n10. What is the pupose validator package?\n\n## Exercises: Level 2\n\n1. Learn how to use Sass\n2. Learn how to use axios\n3. Learn how to use moment and react-icons\n4. Use the validator package to validate the form you had in day 12\n5. Use classnames to change a class based on some logic.\n\n## Exercises: Level 3\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 14](../14_Day_Component_Life_Cycles/14_component_life_cycles.md) | [Day 16 >>]()\n" }, { "path": "15_Third_Party_Packages/15_third_pary_packages_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "15_Third_Party_Packages/15_third_pary_packages_boilerplate/README.md", "content": "# 30 Days of React App: Day 15\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "15_Third_Party_Packages/15_third_pary_packages_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "15_Third_Party_Packages/15_third_pary_packages_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport axios from 'axios'\nimport ReactDOM from 'react-dom'\nimport moment from 'moment'\nimport styled from 'styled-components'\nimport {\n TiSocialLinkedinCircular,\n TiSocialGithubCircular,\n TiSocialTwitterCircular,\n} from 'react-icons/ti'\n\nconst Title = styled.h1`\n font-size: 70px;\n font-weight: 300;\n`\nconst SubTitle = styled.h2`\n font-weight: 300;\n`\n\nconst Header = styled.header`\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n margin: 0;\n`\n\nclass App extends Component {\n constructor(props) {\n super(props)\n console.log('I am the constructor and I will be the first to run.')\n this.state = {\n firstName: 'John',\n data: [],\n day: 1,\n congratulate: '',\n }\n }\n\n componentDidMount() {\n const API_URL = 'https://restcountries.eu/rest/v2/all'\n axios\n .get(API_URL)\n .then((response) => {\n this.setState({\n data: response.data,\n })\n })\n .catch((error) => {\n console.log(error)\n })\n\n }\n static getDerivedStateFromProps(props, state) {\n return { firstName: props.firstName }\n }\n shouldComponentUpdate(nextProps, nextState) {\n console.log(nextProps, nextState)\n console.log(nextState.day)\n if (nextState.day > 31) {\n return false\n } else {\n return true\n }\n }\n\n doChallenge = () => {\n this.setState({\n day: this.state.day + 1,\n })\n }\n renderCountries = () => {\n return this.state.data.map((country) => {\n const languageOrLanguages =\n country.languages.length > 1 ? 'Langauges' : 'Language'\n const formatLanguages = country.languages\n .map(({ name }) => name)\n .join(', ')\n return (\n
    \n
    \n {' '}\n {country.name}{' '}\n
    \n
    \n

    {country.name}

    \n

    Capital: {country.capital}

    \n

    \n {languageOrLanguages}: {formatLanguages}\n

    \n

    Population: {country.population}

    \n
    \n
    \n )\n })\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevState.day == 30) {\n this.setState({\n congratulate: 'Congratulations,Challenge has been completed',\n })\n }\n console.log(prevState, prevProps)\n }\n\n render() {\n return (\n
    \n
    \n 30 Days Of React\n

    Getting Started React

    \n

    JavaScript Library

    \n

    Instructor: Asabeneh Yetayey

    \n Oct 15, 2020\n
    \n

    This challenge was started {moment('2020-10-01').fromNow()}

    \n

    The challenge will be over in {moment('2020-10-30').fromNow()}

    \n

    Today is {moment(new Date()).format('MMMM DD, YYYY HH:mm')}

    \n

    React Component Life Cycle

    \n

    Calling API

    \n \n \n \n\n \n

    Challenge: Day {this.state.day}

    \n {this.state.congratulate &&

    {this.state.congratulate}

    }\n
    \n

    There are {this.state.data.length} countries in the api

    \n
    {this.renderCountries()}
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component.md", "content": "
    \n

    30 Days Of React: Higher Order Component

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 15](../15_Third_Party_Packages/15_third_party_packages.md) | [Day 17 >>](../17_React_Router/17_react_router.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_16.jpg)\n\n- [Higher Order Component](#higher-order-component)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Higher Order Component\n\nThe term higher order component is similar to higher order function in JavaScript. In JavaScript, a higher order function is a function that takes another function as a parameter or return another function.\n\nSimilar to higher order function, a higher order component takes a component and return another component.\nThis definition will make sense with examples. Look at the example below for better understand.\n\n```js\n// One way of writing a Higher Order Component(HOC)\nimport React from 'react'\nconst higherOrderComponent = (Component) => {\n return (props) => {\n return \n }\n}\n```\n\nMost of the time third party libraries use higher order component. For instance redux, react-router-dom and material-u use higher order component.\n\n```js\nimport React from 'react'\n\nconst Button = ({ onClick, text, style }) => {\n return (\n \n )\n}\n\nconst buttonWithStyle = (CompParam) => {\n const buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: '10px 25px',\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n }\n return (props) => {\n return \n }\n}\nconst NewButton = buttonWithSuperPower(Button)\n\nclass App extends Component {\n render() {\n return (\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet's make the buttonWithStyle higher order take more parameter in addition to the component.\n\n```js\nimport React from 'react'\n\nconst Button = ({ onClick, text, style }) => {\n return (\n \n )\n}\n\nconst buttonWithStyles = (CompParam, name = 'default') => {\n const colors = [\n {\n name: 'default',\n backgroundColor: '#e7e7e7',\n color: '#000000',\n },\n {\n name: 'react',\n backgroundColor: '#61dbfb',\n color: '#ffffff',\n },\n {\n name: 'success',\n backgroundColor: '#4CAF50',\n color: '#ffffff',\n },\n {\n name: 'info',\n backgroundColor: '#2196F3',\n color: '#ffffff',\n },\n {\n name: 'warning',\n backgroundColor: '#ff9800',\n color: '#ffffff',\n },\n {\n name: 'danger',\n backgroundColor: '#f44336',\n color: '#ffffff',\n },\n ]\n const { backgroundColor, color } = colors.find((c) => c.name === name)\n\n const buttonStyles = {\n backgroundColor,\n padding: '10px 45px',\n border: 'none',\n borderRadius: 3,\n margin: 3,\n cursor: 'pointer',\n fontSize: '1.25rem',\n color,\n }\n return (props) => {\n return \n }\n}\n\nconst NewButton = buttonWithSuperPower(Button)\nconst ReactButton = buttonWithSuperPower(Button, 'react')\nconst InfoButton = buttonWithSuperPower(Button, 'info')\nconst SuccessButton = buttonWithSuperPower(Button, 'success')\nconst WarningButton = buttonWithSuperPower(Button, 'warning')\nconst DangerButton = buttonWithSuperPower(Button, 'danger')\n\nclass App extends Component {\n render() {\n return (\n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nThe is above example is one use case of Higher Order Component. However, its use case is is more than just styling simple button. It has enormous use cases, it allow us to reuse component and enhance a component with style and functionality. In the coming sections, we will cover React Router and we will use HOC and you will not be surprised when you see one component wrap another component.\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is higher order function\n2. What is Higher Order Component\n3. What is the difference between higher order function and higher order component?\n4. A higher order component can allow us to enhance a component. (T or F)\n\n## Exercises: Level 2\n\n1. Make a higher order component which can handle all the input type.\n\n## Exercises: Level 3\n\ncoming\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 15](../15_Third_Party_Packages/15_third_party_packages.md) | [Day 17 >>](../17_React_Router/17_react_router.md)\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component_boilerplate/README.md", "content": "# 30 Days of React App: Day 16\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "16_Higher_Order_Component/16_higher_order_component_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Button = ({ onClick, text, style }) => {\n return (\n \n )\n}\n\nconst buttonWithStyles = (CompParam, name = 'default') => {\n const colors = [\n {\n name: 'default',\n backgroundColor: '#e7e7e7',\n color: '#000000',\n },\n {\n name: 'react',\n backgroundColor: '#61dbfb',\n color: '#ffffff',\n },\n {\n name: 'success',\n backgroundColor: '#4CAF50',\n color: '#ffffff',\n },\n {\n name: 'info',\n backgroundColor: '#2196F3',\n color: '#ffffff',\n },\n {\n name: 'warning',\n backgroundColor: '#ff9800',\n color: '#ffffff',\n },\n {\n name: 'danger',\n backgroundColor: '#f44336',\n color: '#ffffff',\n },\n ]\n const { backgroundColor, color } = colors.find((c) => c.name === name)\n\n const buttonStyles = {\n backgroundColor,\n padding: '10px 45px',\n border: 'none',\n borderRadius: 3,\n margin: 3,\n cursor: 'pointer',\n fontSize: '1.25rem',\n color,\n }\n return (props) => {\n return \n }\n}\n\nconst NewButton = buttonWithStyles(Button)\nconst ReactButton = buttonWithStyles(Button, 'react')\nconst InfoButton = buttonWithStyles(Button, 'info')\nconst WarningButton = buttonWithStyles(Button, 'warning')\nconst DangerButton = buttonWithStyles(Button, 'danger')\nconst SuccessButton = buttonWithStyles(Button, 'success')\n\nclass App extends Component {\n render() {\n return (\n
    \n

    Higher Order Components

    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "17_React_Router/17_react_router.md", "content": "
    \n

    30 Days Of React: React Router

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 16](../16_Higher_Order_Component/16_higher_order_component.md) | [Day 18 >>](../18_projects/18_projects.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_17.jpg)\n\n- [React Router](#react-router)\n - [What is React Router ?](#what-is-react-router-)\n - [BroswerRouter](#broswerrouter)\n - [Route](#route)\n - [Switch](#switch)\n - [NavLink](#navlink)\n - [Nested Routing](#nested-routing)\n - [Redirect](#redirect)\n - [Prompt](#prompt)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# React Router\n\n## What is React Router ?\n\nYou may have not heard of the word route or router before and it might be necessary to define it here. The literal meaning of route is a path or a way to get to somewhere. The meaning in React is also similar to the literal meaning. React Router is by itself a React component which allows you to navigate between React components.\n\nIn this section, you will get started how to use React router but it may not have plenty of information about it. In case you prefer to learn from the official website of React Router you can get [here](https://reactrouter.com/web/guides/quick-start).\n\nAs we have cleared out the very beginning that React is a single page application which has only one index.html page in the entire application. When we implement a React Router the different components get render on the index.html page at same time or different time base on different logic and conditions. React Router has different versions and the latest version is React Router 5. We will use React Router version 4 for this challenge. Let's get started by installing the React Router packages.\n\n```js\nAsabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install react-router-dom\n```\n\nLet's implement a simple routing using the boilerplate codes we have been creating in the previous days. First of all, import the _react-router-dom_ and we can extract all the necessary components we need for routing from react-router-dom.\n\n```js\nimport React from 'react'\nimport {\n BrowserRouter,\n Route,\n NavLink,\n Switch,\n Redirect,\n Prompt,\n withRouter,\n} from 'react-router-dom'\n```\n\nWe may not all these components in every project but it is good to know that it exists.\n\n## BroswerRouter\n\nBrowerRouter is a parent component which allows to wrap the application route. Using the BrowserRouter we can access the browser history. Sometimes it can renames as router.\n\n```js\nimport React from 'react'\nimport { BrowserRouter as Router } from 'react-router-dom'\n```\n\nLet's make make use of BrowserRouter to make a navigation for a React application.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter as Router } from 'react-router-dom'\n\nclass App extends Component {\n render() {\n return (\n \n
    \n

    React Router DOM

    \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe wrapped our application with BrowserRouter or Router and it works smoothly as it used to be. Let's create Home, About, Contact, Challenge component and route to the different components. In addition to the components, we should import the Route component from react-router-dom.\n\n## Route\n\nThe Route component allows to navigate between components. It is a pathway from one component to another.\nThe Route component has two required props: the path and component or render.\nThe path props is where the component has to be rendered and the component props is the component which has to be rendered in that specific path. To see your component try to request /home route.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter as Router, Route } from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n\nclass App extends Component {\n render() {\n return (\n \n
    \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet's add some more components to our route.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter as Router, Route } from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n \n
    \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nAs you can see the above example, all the routes have slush(/). We usually make the home with just slush(/), then let's use the slush(/) for home.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter as Router, Route } from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n \n
    \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nNow if you try to navigate by writing / or /about you will see the home page all the time. The home route has (/) which common to other routes. Since the home is lingering let's find a way to avoid this. We can solve in three ways. One with an attribute exact. If we don't like a URL to have a trailing slush(/about/) we can use strict attribute in addition to exact.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter as Router, Route } from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n \n
    \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf we don't like a URL to have a trailing slush, for instance(/about/), we can use strict attribute in addition to exact.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter as Router, Route } from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n \n
    \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nThe other way to avoid the lingering home page is rearranging the routing order and Switch component. Just putting the home route at the bottom.\n\n## Switch\n\nThe Switch component allows only on component to be rendered.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n \n
    \n \n \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nThe route is a kind of ready but so far we are navigating manually by writing each specific route. Let's make use of the NavLink component to be forwarded to each specific route.\n\n## NavLink\n\nThe NavLink component allow us to navigate each component. It takes a to required props. The NavLink is a component on top of anchor tag. Clicking on a NavLink does not do a page refresh which is one of the best quality of using a router. See the example below. First, let's implement a navigation for the home page.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n \n
    \n
      \n
    • \n Home\n
      • \n
    \n\n \n \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nNow, lets' implement navigation for all the components.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\n\nclass App extends Component {\n render() {\n return (\n \n
    \n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n Challenges\n
      • \n
    \n\n \n \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nOur route and navigation works perfectly as long as the route is found. However, if a route is not found it falls to last component. In order to avoid this problem, lets create a separate not found component and put it inside our routing.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\nconst NotFound = (props) =>

    The page your looking for not found

    \nclass App extends Component {\n render() {\n return (\n \n
    \n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n Challenges\n
      • \n
    \n\n \n \n \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet's make a separate component which is responsible for the navigation.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\nconst Challenges = (props) => (\n
    \n

    30 Days Of React Challenge

    \n
    \n)\nconst NotFound = (props) =>

    The page your looking for not found

    \nconst Navbar = () => (\n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n Challenges\n
      • \n
    \n)\nclass App extends Component {\n render() {\n return (\n \n
    \n \n \n \n \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Nested Routing\n\nWe have implemented a simple navigation using React Router. Now, let's see how we can also nest a route. It possible to have a nested route in React.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\n\nconst challenges = [\n {\n name: '30 Days Of Python',\n description:\n '30 Days of Python challenge is a step by step guide to learn Python in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '20 Nov 2019 - 20 Dec 2019',\n slug: 'pyhton',\n url:\n 'https://github.com/https://https://github.com/Asabeneh/30-Days-Of-Python.com/Asabeneh/30-Days-Of-JavaScript/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of JavaScript',\n description:\n '30 Days of JavaScript challenge is a step by step guide to learn JavaScript in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Jan 2020 - 30 Jan 2020',\n slug: 'javascript',\n url: 'https://github.com/Asabeneh/30-Days-Of-JavaScript',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of React',\n description:\n '30 Days of React challenge is a step by step guide to learn React in 30 days.',\n status: 'ongoing',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Oct 2020- 30 Oct 2020',\n slug: 'react',\n url: 'https://github.com/Asabeneh/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 HTML and CSS',\n description:\n '30 Days of HTML and CSS challenge is a step by step guide to learn HTML and CSS in 30 days.',\n\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'html-and-css',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 ReactNative',\n description:\n '30 Days of ReactNative challenge is a step by step guide to learn ReactNative in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'reactnative',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Data Analysis',\n description:\n '30 Days of Data Analysis challenge is a step by step guide to learn about data, data visualization and data analysis in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'data-analysis',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Machine Learning',\n description:\n '30 Days of Machine learning challenge is a step by step guide to learn data cleaning, machine learning models and predictions in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'machine-learning',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n]\n\nconst Challenge = ({\n challenge: {\n name,\n description,\n status,\n days,\n level,\n duration,\n author: { firstName, lastName },\n },\n}) => (\n
    \n

    {name}

    \n

    {level}

    \n

    \n Author: {firstName} {lastName}\n

    \n {duration && (\n <>\n {' '}\n {duration}
    \n \n )}\n Number of days: {days}\n\n

    {description}

    \n
    \n)\n\nconst Challenges = (props) => {\n const path = props.location.pathname\n const slug = path.split('/').slice(path.split('/').length - 1)[0]\n const challenge = challenges.find((challenge) => challenge.slug === slug)\n\n return (\n
    \n

    30 Days Of React Challenge

    \n
      \n {challenges.map(({ name, slug }) => (\n
    • \n {name}\n
      • \n ))}\n
    \n \n

    Choose any of the challenges

    }\n />\n }\n />\n     \n
    \n )\n}\n\nconst NotFound = (props) =>

    The page your looking for not found

    \nconst Navbar = () => (\n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n Challenges\n
      • \n
    \n)\nclass App extends Component {\n render() {\n return (\n \n
    \n \n \n \n \n \n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIn next part will will cover Prompt, Redirect and withRouter component.\n\n## Redirect\n\nRedirect can help us to redirect a route to a certain path based some condition. For instance if a user is logged in we redirect it to the dashboard otherwise to the login page. Let's implement a fake login in above snippet of code. If a user logged in it will redirected to the challenges otherwise we suggest the user to login.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n Redirect,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\n\nconst challenges = [\n {\n name: '30 Days Of Python',\n description:\n '30 Days of Python challenge is a step by step guide to learn Python in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '20 Nov 2019 - 20 Dec 2019',\n slug: 'pyhton',\n url:\n 'https://github.com/https://https://github.com/Asabeneh/30-Days-Of-Python.com/Asabeneh/30-Days-Of-JavaScript/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of JavaScript',\n description:\n '30 Days of JavaScript challenge is a step by step guide to learn JavaScript in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Jan 2020 - 30 Jan 2020',\n slug: 'javascript',\n url: 'https://github.com/Asabeneh/30-Days-Of-JavaScript',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of React',\n description:\n '30 Days of React challenge is a step by step guide to learn React in 30 days.',\n status: 'ongoing',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Oct 2020- 30 Oct 2020',\n slug: 'react',\n url: 'https://github.com/Asabeneh/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 HTML and CSS',\n description:\n '30 Days of HTML and CSS challenge is a step by step guide to learn HTML and CSS in 30 days.',\n\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'html-and-css',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 ReactNative',\n description:\n '30 Days of ReactNative challenge is a step by step guide to learn ReactNative in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'reactnative',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Data Analysis',\n description:\n '30 Days of Data Analysis challenge is a step by step guide to learn about data, data visualization and data analysis in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'data-analysis',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Machine Learning',\n description:\n '30 Days of Machine learning challenge is a step by step guide to learn data cleaning, machine learning models and predictions in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'machine-learning',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n]\n\nconst Challenge = ({\n challenge: {\n name,\n description,\n status,\n days,\n level,\n duration,\n author: { firstName, lastName },\n },\n}) => (\n
    \n

    {name}

    \n

    {level}

    \n

    \n Author: {firstName} {lastName}\n

    \n {duration && (\n <>\n {' '}\n {duration}
    \n \n )}\n Number of days: {days}\n\n

    {description}

    \n
    \n)\n\nconst Challenges = (props) => {\n const path = props.location.pathname\n const slug = path.split('/').slice(path.split('/').length - 1)[0]\n const challenge = challenges.find((challenge) => challenge.slug === slug)\n\n return (\n
    \n

    30 Days Of React Challenge

    \n
      \n {challenges.map(({ name, slug }) => (\n
    • \n {name}\n
      • \n ))}\n
    \n \n

    Choose any of the challenges

    }\n />\n }\n />\n     \n
    \n )\n}\n\nconst NotFound = (props) =>

    The page your looking for not found

    \nconst Navbar = ({ username }) => (\n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n User\n
      • \n
    • \n Challenges\n
      • \n
    \n)\n\nconst User = ({ match, isLoggedIn, handleLogin }) => {\n const username = match.params.username\n return (\n
    \n {isLoggedIn ? (\n <>\n

    Welcome {username} to the challenge

    \n Now, you can navigate through all the challenges
    \n \n ) : (\n

    Please login in to access the challenges

    \n )}\n \n
    \n )\n}\n\nconst Welcome = ({ handleLogin, isLoggedIn }) => {\n return (\n
    \n {isLoggedIn ? 'Welcome to the challenge' :

    Please login in

    }\n \n
    \n )\n}\nclass App extends Component {\n state = {\n isLoggedIn: false,\n firstName: 'Asabeneh',\n }\n handleLogin = () => {\n this.setState({\n isLoggedIn: !this.state.isLoggedIn,\n })\n }\n render() {\n return (\n \n
    \n \n \n \n \n (\n \n )}\n />\n (\n \n )}\n />\n {\n return this.state.isLoggedIn ? (\n \n ) : (\n \n )\n }}\n />\n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Prompt\n\nSometimes when a user try to leave a page we may like to inform that he has unfinished task. In order to do that we can use the Prompt component. The Prompt component takes two props which are when and message(). Let's implement this in the previous code.\n\nIn the following code a Prompt has been implemented without when therefore it will check all the routes.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n Redirect,\n Prompt,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\n\nconst challenges = [\n {\n name: '30 Days Of Python',\n description:\n '30 Days of Python challenge is a step by step guide to learn Python in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '20 Nov 2019 - 20 Dec 2019',\n slug: 'pyhton',\n url:\n 'https://github.com/https://https://github.com/Asabeneh/30-Days-Of-Python.com/Asabeneh/30-Days-Of-JavaScript/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of JavaScript',\n description:\n '30 Days of JavaScript challenge is a step by step guide to learn JavaScript in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Jan 2020 - 30 Jan 2020',\n slug: 'javascript',\n url: 'https://github.com/Asabeneh/30-Days-Of-JavaScript',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of React',\n description:\n '30 Days of React challenge is a step by step guide to learn React in 30 days.',\n status: 'ongoing',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Oct 2020- 30 Oct 2020',\n slug: 'react',\n url: 'https://github.com/Asabeneh/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 HTML and CSS',\n description:\n '30 Days of HTML and CSS challenge is a step by step guide to learn HTML and CSS in 30 days.',\n\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'html-and-css',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 ReactNative',\n description:\n '30 Days of ReactNative challenge is a step by step guide to learn ReactNative in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'reactnative',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Data Analysis',\n description:\n '30 Days of Data Analysis challenge is a step by step guide to learn about data, data visualization and data analysis in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'data-analysis',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Machine Learning',\n description:\n '30 Days of Machine learning challenge is a step by step guide to learn data cleaning, machine learning models and predictions in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'machine-learning',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n]\n\nconst Challenge = ({\n challenge: {\n name,\n description,\n status,\n days,\n level,\n duration,\n author: { firstName, lastName },\n },\n}) => (\n
    \n

    {name}

    \n

    {level}

    \n

    \n Author: {firstName} {lastName}\n

    \n {duration && (\n <>\n {' '}\n {duration}
    \n \n )}\n Number of days: {days}\n\n

    {description}

    \n
    \n)\n\nconst Challenges = (props) => {\n const path = props.location.pathname\n const slug = path.split('/').slice(path.split('/').length - 1)[0]\n const challenge = challenges.find((challenge) => challenge.slug === slug)\n\n return (\n
    \n

    30 Days Of React Challenge

    \n
      \n {challenges.map(({ name, slug }) => (\n
    • \n {name}\n
      • \n ))}\n
    \n \n

    Choose any of the challenges

    }\n />\n }\n />\n     \n
    \n )\n}\n\nconst NotFound = (props) =>

    The page your looking for not found

    \nconst Navbar = ({ username }) => (\n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n User\n
      • \n
    • \n Challenges\n
      • \n
    \n)\n\nconst User = ({ match, isLoggedIn, handleLogin }) => {\n const username = match.params.username\n return (\n
    \n {isLoggedIn ? (\n <>\n

    Welcome {username} to the challenge

    \n Now, you can navigate through all the challenges
    \n \n ) : (\n

    Please login in to access the challenges

    \n )}\n \n
    \n )\n}\n\nconst Welcome = ({ handleLogin, isLoggedIn }) => {\n return (\n
    \n {isLoggedIn ? 'Welcome to the challenge' :

    Please login in

    }\n \n
    \n )\n}\nclass App extends Component {\n state = {\n isLoggedIn: false,\n firstName: 'Asabeneh',\n }\n handleLogin = () => {\n this.setState({\n isLoggedIn: !this.state.isLoggedIn,\n })\n }\n render() {\n return (\n \n
    \n \n \n\n \n \n \n (\n \n )}\n />\n (\n \n )}\n />\n {\n return this.state.isLoggedIn ? (\n \n ) : (\n \n )\n }}\n />\n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nInstead of without condition, let's inform the user if he really wants to log out by adding checking some condition using a call back function inside the message.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n Redirect,\n Prompt,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\n\nconst challenges = [\n {\n name: '30 Days Of Python',\n description:\n '30 Days of Python challenge is a step by step guide to learn Python in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '20 Nov 2019 - 20 Dec 2019',\n slug: 'pyhton',\n url:\n 'https://github.com/https://https://github.com/Asabeneh/30-Days-Of-Python.com/Asabeneh/30-Days-Of-JavaScript/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of JavaScript',\n description:\n '30 Days of JavaScript challenge is a step by step guide to learn JavaScript in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Jan 2020 - 30 Jan 2020',\n slug: 'javascript',\n url: 'https://github.com/Asabeneh/30-Days-Of-JavaScript',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of React',\n description:\n '30 Days of React challenge is a step by step guide to learn React in 30 days.',\n status: 'ongoing',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Oct 2020- 30 Oct 2020',\n slug: 'react',\n url: 'https://github.com/Asabeneh/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 HTML and CSS',\n description:\n '30 Days of HTML and CSS challenge is a step by step guide to learn HTML and CSS in 30 days.',\n\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'html-and-css',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 ReactNative',\n description:\n '30 Days of ReactNative challenge is a step by step guide to learn ReactNative in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'reactnative',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Data Analysis',\n description:\n '30 Days of Data Analysis challenge is a step by step guide to learn about data, data visualization and data analysis in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'data-analysis',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Machine Learning',\n description:\n '30 Days of Machine learning challenge is a step by step guide to learn data cleaning, machine learning models and predictions in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'machine-learning',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n]\n\nconst Challenge = ({\n challenge: {\n name,\n description,\n status,\n days,\n level,\n duration,\n author: { firstName, lastName },\n },\n}) => (\n
    \n

    {name}

    \n

    {level}

    \n

    \n Author: {firstName} {lastName}\n

    \n {duration && (\n <>\n {' '}\n {duration}
    \n \n )}\n Number of days: {days}\n\n

    {description}

    \n
    \n)\n\nconst Challenges = (props) => {\n const path = props.location.pathname\n const slug = path.split('/').slice(path.split('/').length - 1)[0]\n const challenge = challenges.find((challenge) => challenge.slug === slug)\n\n return (\n
    \n

    30 Days Of React Challenge

    \n
      \n {challenges.map(({ name, slug }) => (\n
    • \n {name}\n
      • \n ))}\n
    \n \n

    Choose any of the challenges

    }\n />\n }\n />\n     \n
    \n )\n}\n\nconst NotFound = (props) =>

    The page your looking for not found

    \nconst Navbar = ({ username }) => (\n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n User\n
      • \n
    • \n Challenges\n
      • \n
    \n)\n\nconst User = ({ match, isLoggedIn, handleLogin }) => {\n const username = match.params.username\n return (\n
    \n {isLoggedIn ? (\n <>\n

    Welcome {username} to the challenge

    \n Now, you can navigate through all the challenges
    \n \n ) : (\n

    Please login in to access the challenges

    \n )}\n \n
    \n )\n}\n\nconst Welcome = ({ handleLogin, isLoggedIn }) => {\n return (\n
    \n {isLoggedIn ? 'Welcome to the challenge' :

    Please login in

    }\n \n
    \n )\n}\nclass App extends Component {\n state = {\n isLoggedIn: false,\n firstName: 'Asabeneh',\n }\n handleLogin = () => {\n this.setState({\n isLoggedIn: !this.state.isLoggedIn,\n })\n }\n render() {\n return (\n \n
    \n \n\n {\n return this.state.isLoggedIn &&\n pathname.includes('/user/Asabeneh')\n ? 'Are you sure you want to logout?'\n : true\n }}\n />\n\n \n \n \n (\n \n )}\n />\n (\n \n )}\n />\n {\n return this.state.isLoggedIn ? (\n \n ) : (\n \n )\n }}\n />\n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What package do you use to implement routing in react?\n2. What is the default export in react-router-dom?\n3. What is the use of the following Components(Route, NavLink, Switch, Redirect, Prompt)\n\n## Exercises: Level 2\n\nNow, you know about React router. Build your portfolio with React and implement React router for navigation.\n\n## Exercises: Level 3\n\ncoming\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 16](../16_Higher_Order_Component/16_higher_order_component.md) | [Day 18 >>](../18_projects/18_projects.md)\n" }, { "path": "17_React_Router/17_react_router_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "17_React_Router/17_react_router_boilerplate/README.md", "content": "# 30 Days of React App: Day 17\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "17_React_Router/17_react_router_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "17_React_Router/17_react_router_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "17_React_Router/17_react_router_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "17_React_Router/17_react_router_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "17_React_Router/17_react_router_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n NavLink,\n Redirect,\n Prompt,\n} from 'react-router-dom'\n\n// Home component\nconst Home = (props) =>

    Welcome Home

    \n// About component\nconst About = (props) =>

    About Us

    \n// Contact component\nconst Contact = (props) =>

    Contact us

    \n// Challenge component\n\nconst challenges = [\n {\n name: '30 Days Of Python',\n description:\n '30 Days of Python challenge is a step by step guide to learn Python in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '20 Nov 2019 - 20 Dec 2019',\n slug: 'pyhton',\n url:\n 'https://github.com/https://https://github.com/Asabeneh/30-Days-Of-Python.com/Asabeneh/30-Days-Of-JavaScript/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of JavaScript',\n description:\n '30 Days of JavaScript challenge is a step by step guide to learn JavaScript in 30 days.',\n status: 'completed',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Jan 2020 - 30 Jan 2020',\n slug: 'javascript',\n url: 'https://github.com/Asabeneh/30-Days-Of-JavaScript',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Days Of React',\n description:\n '30 Days of React challenge is a step by step guide to learn React in 30 days.',\n status: 'ongoing',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '1 Oct 2020- 30 Oct 2020',\n slug: 'react',\n url: 'https://github.com/Asabeneh/30-Days-Of-React',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 HTML and CSS',\n description:\n '30 Days of HTML and CSS challenge is a step by step guide to learn HTML and CSS in 30 days.',\n\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'html-and-css',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 ReactNative',\n description:\n '30 Days of ReactNative challenge is a step by step guide to learn ReactNative in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'reactnative',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Data Analysis',\n description:\n '30 Days of Data Analysis challenge is a step by step guide to learn about data, data visualization and data analysis in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'data-analysis',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n {\n name: '30 Machine Learning',\n description:\n '30 Days of Machine learning challenge is a step by step guide to learn data cleaning, machine learning models and predictions in 30 days.',\n status: 'coming',\n days: 30,\n level: 'Beginners to Advanced',\n duration: '',\n slug: 'machine-learning',\n url: '',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n },\n]\n\nconst Challenge = ({\n challenge: {\n name,\n description,\n status,\n days,\n level,\n duration,\n author: { firstName, lastName },\n },\n}) => (\n
    \n

    {name}

    \n

    {level}

    \n

    \n Author: {firstName} {lastName}\n

    \n {duration && (\n <>\n {' '}\n {duration}
    \n \n )}\n Number of days: {days}\n\n

    {description}

    \n
    \n)\n\nconst Challenges = (props) => {\n const path = props.location.pathname\n const slug = path.split('/').slice(path.split('/').length - 1)[0]\n const challenge = challenges.find((challenge) => challenge.slug === slug)\n\n return (\n
    \n

    30 Days Of React Challenge

    \n
      \n {challenges.map(({ name, slug }) => (\n
    • \n {name}\n
      • \n ))}\n
    \n \n

    Choose any of the challenges

    }\n />\n }\n />\n     \n
    \n )\n}\n\nconst NotFound = (props) =>

    The page your looking for not found

    \nconst Navbar = ({ username }) => (\n
      \n
    • \n Home\n
      • \n
    • \n About\n
      • \n
    • \n Contact\n
      • \n
    • \n User\n
      • \n
    • \n Challenges\n
      • \n
    \n)\n\nconst User = ({ match, isLoggedIn, handleLogin }) => {\n const username = match.params.username\n return (\n
    \n {isLoggedIn ? (\n <>\n

    Welcome {username} to the challenge

    \n Now, you can navigate through all the challenges
    \n \n ) : (\n

    Please login in to access the challenges

    \n )}\n \n
    \n )\n}\n\nconst Welcome = ({ handleLogin, isLoggedIn }) => {\n return (\n
    \n {isLoggedIn ? 'Welcome to the challenge' :

    Please login in

    }\n \n
    \n )\n}\nclass App extends Component {\n state = {\n isLoggedIn: false,\n firstName: 'Asabeneh',\n }\n handleLogin = () => {\n this.setState({\n isLoggedIn: !this.state.isLoggedIn,\n })\n }\n render() {\n return (\n \n
    \n \n\n {\n return this.state.isLoggedIn &&\n pathname.includes('/user/Asabeneh')\n ? 'Are you sure you want to logout?'\n : true\n }}\n />\n\n \n \n \n (\n \n )}\n />\n (\n \n )}\n />\n {\n return this.state.isLoggedIn ? (\n \n ) : (\n \n )\n }}\n />\n \n \n \n
    \n     \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/README.md", "content": "# 30 Days of React App: Day 18\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport axios from 'axios'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n this.fetchCountryData()\n }\n fetchCountryData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await axios.get(url)\n const data = await response.data\n this.setState({\n data,\n })\n } catch (error) {\n console.log(error)\n }\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "18_Fetch_And_Axios/18_fetch_axios.md", "content": "
    \n

    30 Days Of React: Fetch and Axios

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>]()\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_18.jpg)\n\n- [Fetch and Axios](#fetch-and-axios)\n - [Fetch](#fetch)\n - [Axios](#axios)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n - [Exercises: Level 2](#exercises-level-2)\n - [Exercises: Level 3](#exercises-level-3)\n\n# Fetch and Axios\n\n## Fetch\n\nCurrently, JavaScript provides a fetch API to make HTTP requests. Fetch might not be supported by all browsers therefore we have install addition package for browser supports. However, if we use Axios we do not need to use additional package for browser support. Axios code seems neater than fetch. In this section we will see the difference between fetch and axios. May be if you want to know the browser support of fetch you check out on [caniuse](https://caniuse.com/ciu/index) website. As of today, it has 95.62% browser support.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Country = ({\n country: { name, capital, flag, languages, population, currency },\n}) => {\n const formatedCapital =\n capital.length > 0 ? (\n <>\n Capital: \n {capital}\n \n ) : (\n ''\n )\n const formatLanguage = languages.length > 1 ? `Languages` : `Language`\n console.log(languages)\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    {formatedCapital}

    \n

    \n {formatLanguage}: \n {languages.map((language) => language.name).join(', ')}\n

    \n

    \n Population: \n {population.toLocaleString()}\n

    \n

    \n Currency: \n {currency}\n

    \n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n const url = 'https://restcountries.eu/rest/v2/all'\n fetch(url)\n .then((response) => {\n return response.json()\n })\n .then((data) => {\n console.log(data)\n this.setState({\n data,\n })\n })\n .catch((error) => {\n console.log(error)\n })\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe can implement async and await and make the above code short and clean.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Country = ({\n country: { name, capital, flag, languages, population, currency },\n}) => {\n const formatedCapital =\n capital.length > 0 ? (\n <>\n Capital: \n {capital}\n \n ) : (\n ''\n )\n const formatLanguage = languages.length > 1 ? `Languages` : `Language`\n console.log(languages)\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    {formatedCapital}

    \n

    \n {formatLanguage}: \n {languages.map((language) => language.name).join(', ')}\n

    \n

    \n Population: \n {population.toLocaleString()}\n

    \n

    \n Currency: \n {currency}\n

    \n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n this.fetchCountryData()\n }\n\n fetchCountryData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n const response = await fetch(url)\n const data = await response.json()\n this.setState({\n data,\n })\n }\n\n render() {\n return (\n
    \n

    Fetching API using Fetch

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nIf we use async and await we handle the error using try and catch. Let's apply a try catch block in the above code.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n

    \n Currency: \n {currency}\n

    \n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n this.fetchCountryData()\n }\n\n fetchCountryData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await fetch(url)\n const data = await response.json()\n this.setState({\n data,\n })\n } catch (error) {\n console.log(error)\n }\n }\n\n render() {\n return (\n
    \n

    Fetching API using Fetch

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nNow, let's see how to do the same API call using axios.\n\nHow can do fetch if we have multiple API two call ?\n\n## Axios\n\nAxios is a third party package and we need to install it using npm. It is the most popular way to make HTTP requests(GET, POST, PUT, PATCH, DELETE). In this example, we will cover only a get request.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport axios from 'axios'\n\nconst Country = ({\n country: { name, capital, flag, languages, population, currency },\n}) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n >\n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n const url = 'https://restcountries.eu/rest/v2/all'\n axios\n .get(url)\n .then((response) => {\n this.setState({\n data: response.data,\n })\n })\n .catch((error) => {\n console.log(error)\n })\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet's also implement the axios fetching using async and await.\n\n```js\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport axios from 'axios'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n this.fetchCountryData()\n }\n fetchCountryData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await axios.get(url)\n const data = await response.data\n this.setState({\n data,\n })\n } catch (error) {\n console.log(error)\n }\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nAs you have seen, there is no much difference between fetch and axios. But I recommend you to use more axios than fetch because of browser support and easy of use.\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is HTTP request?\n2. What are the most common HTTP requests?\n3. What is fetch?\n4. What is axios?\n5. What is the difference between fetch and axios?\n6. Do you prefer fetch to axios for make HTTP requests?\n\n## Exercises: Level 2\n\n1. Find the average metric weight and life span of cats in the following [API](https://api.thecatapi.com/v1/breeds). There are 67 breeds of cats in the API.\n\n![Average cat weight and age](../images/average_cat_weight_and_age.png)\n\n## Exercises: Level 3\n\n1. How many countries do have cat breeds?\n2. Which country has the highest number of cat breeds?\n3. Arrange countries in ascending order based on the number of cat breeds they have?\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>]()\n" }, { "path": "19_projects/19_projects.md", "content": "
    \n

    30 Days Of React: Projects

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 18](../18_Fetch_And_Axios/18_fetch_axios.md) | [Day 20>>]()\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_19.jpg)\n\n- [Projects](#projects)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n\n# Projects\n\nCongratulations for making it to this far. Now, you have a solid understanding of React. I believe we have covered most important features of React and your are ready to work on projects. What we have covered so far is the old version of React. Starting from Day 20, we will learn React Hooks. In the next three days you will work on projects only.\n\n# Exercises\n\n## Exercises: Level 1\n\nUse the following two APIs, [all cats](https://api.thecatapi.com/v1/breeds) and [a single cat][https://api.thecatapi.com/v1/images/search?breed_id=abys]. In the single cat API, you can get url property which is the image of the cat.\nYour result should look like this [demo](https://www.30daysofreact.com/day-19/cats).\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 18](../18_Fetch_And_Axios/18_fetch_axios.md) | [Day 20>>]()\n" }, { "path": "19_projects/19_projects_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "19_projects/19_projects_boilerplate/README.md", "content": "# 30 Days of React App: Day 19\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "19_projects/19_projects_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "19_projects/19_projects_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "19_projects/19_projects_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "19_projects/19_projects_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "19_projects/19_projects_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport axios from 'axios'\n\nconst Country = ({\n country: { name, capital, flag, languages, population, currency },\n}) => {\n const formatedCapital =\n capital.length > 0 ? (\n <>\n Capital: \n {capital}\n \n ) : (\n ''\n )\n const formatLanguage = languages.length > 1 ? `Languages` : `Language`\n console.log(languages)\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    {formatedCapital}

    \n

    \n {formatLanguage}: \n {languages.map((language) => language.name).join(', ')}\n

    \n

    \n Population: \n {population.toLocaleString()}\n

    \n

    \n Currency: \n {currency}\n

    \n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n this.fetchCountryData()\n }\n fetchCountryData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await axios.get(url)\n const data = await response.data\n this.setState({\n data,\n })\n } catch (error) {\n console.log(error)\n }\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "20_projects/20_projects.md", "content": "
    \n

    30 Days Of React: Projects

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 19](../19_projects/19_projects.md) | [Day 21>>]()\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_20.jpg)\n\n- [Projects](#projects)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n\n# Projects\n\nCongratulations for making it to this far. Now, you have a solid understanding of React. I believe we have covered most important features of React and your are ready to work on projects. What we have covered so far is the old version of React. Starting from Day 20, we will learn React Hooks. In the next three days you will work on projects only.\n\n# Exercises\n\n## Exercises: Level 1\n\nUse the following two APIs, [all cats](https://api.thecatapi.com/v1/breeds) and [a single cat][https://api.thecatapi.com/v1/images/search?breed_id=abys]. In the single cat API, you can get url property which is the image of the cat.\nYour result should look like this [demo](https://www.30daysofreact.com/day-20/cats).\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 19](../19_projects/19_projects.md) | [Day 21>>]()\n" }, { "path": "20_projects/20_projects_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "20_projects/20_projects_boilerplate/README.md", "content": "# 30 Days of React App: Day 20\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "20_projects/20_projects_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "20_projects/20_projects_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "20_projects/20_projects_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "20_projects/20_projects_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "20_projects/20_projects_boilerplate/src/index.js", "content": "import React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport axios from 'axios'\n\nconst Country = ({\n country: { name, capital, flag, languages, population, currency },\n}) => {\n const formatedCapital =\n capital.length > 0 ? (\n <>\n Capital: \n {capital}\n \n ) : (\n ''\n )\n const formatLanguage = languages.length > 1 ? `Languages` : `Language`\n console.log(languages)\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    {formatedCapital}

    \n

    \n {formatLanguage}: \n {languages.map((language) => language.name).join(', ')}\n

    \n

    \n Population: \n {population.toLocaleString()}\n

    \n

    \n Currency: \n {currency}\n

    \n
    \n
    \n )\n}\n\nclass App extends Component {\n state = {\n data: [],\n }\n\n componentDidMount() {\n this.fetchCountryData()\n }\n fetchCountryData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await axios.get(url)\n const data = await response.data\n this.setState({\n data,\n })\n } catch (error) {\n console.log(error)\n }\n }\n\n render() {\n return (\n
    \n

    React Component Life Cycle

    \n

    Calling API

    \n
    \n

    There are {this.state.data.length} countries in the api

    \n
    \n {this.state.data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n }\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks.md", "content": "
    \n

    30 Days Of React: Introducing React Hooks

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 20](../20_projects/20_projects.md) | [Day 22>>]()\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_21.jpg)\n\n- [Introducing React Hook](#introducing-react-hook)\n - [Basic Hooks](#basic-hooks)\n - [State Hook](#state-hook)\n - [Effect Hook](#effect-hook)\n - [Context Hook](#context-hook)\n - [Additional Hook](#additional-hook)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n\n# Introducing React Hook\n\nIn the previous, section you have learned how to use React with hooks which is the older version. Currently, hooks has been introduced to React.\n\nHooks are a new addition in React 16.8. They allow you use state, life cycle methods and other React features without writing a class component. If we are using hooks we can have only a functional component in the entire application. For more detail explanation you check [React documentation](https://reactjs.org/docs/hooks-reference.html).\n\nDifferent hooks have been introduced to React:Basic hooks and additional hooks\n\n## Basic Hooks\n\nThe basic hooks are:\n\n- useState\n- useEffect\n- useContext\n\n### State Hook\n\nUsing hooks we can access state without writing a class based component. Let's use the same example we used for class based components on day 8.\n\nTo use hooks, first we should import the _useState_ hooks from react. The useState is a function which takes one argument and returns a current state and functions that lets you update it.\n\n```js\n// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = () => {\n // Declaring new state variable\n const [count, setCount] = useState(0)\n\n return (\n
    \n

    {count}

    \n \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe use the setCount to update the state. The initial state value is 0.\n\nIn the above example, we used an increment method. Let's also a decrement method.\n\n```js\n// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = () => {\n // Declaring new state variable\n const [count, setCount] = useState(0)\n\n return (\n
    \n

    {count}

    \n \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe can also write separate function instead of writing our function inside the curly brackets.\n\n```js\n// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = () => {\n // Declaring new state variable\n const [count, setCount] = useState(0)\n const addOne = () => {\n let value = count + 1\n setCount(value)\n }\n const minusOne = () => {\n let value = count - 1\n setCount(value)\n }\n return (\n
    \n

    {count}

    \n \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nLet us do more example about state, in the following example we will develop small application which shows either a dog or cat.\nWe can start by setting the initial state with cat then when it is clicked it will show dog and alternatively. We need one method which changes the animal alternatively. See the code below. If you want to see live click [here](https://codepen.io/Asabeneh/full/LYVxKpq).\n\n```js\n// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\nconst App = () => {\n // declaring state\n const url =\n 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'\n\n const [image, setImage] = useState(url)\n\n const changeAnimal = () => {\n let dogURL =\n 'https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg'\n let catURL =\n 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'\n let result = image === catURL ? dogURL : catURL\n setImage(result)\n }\n\n return (\n
    \n

    30 Days Of React

    \n
    \n animal\n
    \n\n \n
    \n )\n}\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nNow, let's put all the codes we have so far and also let's implement state using the useState hooks when it is necessary.\n\n```js\n// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\nimport './index.scss'\n\n// Fuction to show month date year\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\nconst Header = (props) => {\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n}\n\nconst Count = ({ count, addOne, minusOne }) => (\n
    \n

    {count}

    \n
    \n
    \n
    \n)\n\n// TechList Component\nconst TechList = (props) => {\n const { techs } = props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n}\n\n// Main Component\nconst Main = (props) => {\n const {\n techs,\n user,\n greetPeople,\n handleTime,\n changeBackground,\n count,\n addOne,\n minusOne,\n } = props\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n \n
    \n
    \n )\n}\n\n// Footer Component\nconst Footer = (props) => {\n return (\n
    \n
    \n

    Copyright {props.date.getFullYear()}

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n const [count, setCount] = useState(0)\n const [backgroundColor, setBackgroundColor] = useState('')\n\n const showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n }\n const addOne = () => {\n setCount(count + 1)\n }\n\n // method which subtract one to the state\n const minusOne = () => {\n setCount(count - 1)\n }\n const handleTime = () => {\n alert(showDate(new Date()))\n }\n const greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n const changeBackground = () => {}\n\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n\n const user = { ...data.author, image: asabenehImage }\n\n return (\n
    \n {backgroundColor}\n
    \n \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n### Effect Hook\n\n### Context Hook\n\n## Additional Hook\n\n# Exercises\n\n## Exercises: Level 1\n\nConvert everything you wrote to React hooks.\n\n🎉 CONGRATULATIONS ! 🎉\n[<< Day 20](../20_projects/20_projects.md) | [Day 22>>]()\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/README.md", "content": "# 30 Days of React App: Day 21\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/index.js", "content": "// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport asabenehImage from './images/asabeneh.jpg'\nimport './index.scss'\n\n// Fuction to show month date year\nconst showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n}\n\n// User Card Component\nconst UserCard = ({ user: { firstName, lastName, image } }) => (\n
    \n {firstName}\n

    \n {firstName}\n {lastName}\n

    \n
    \n)\n\n// A button component\nconst Button = ({ text, onClick, style }) => (\n \n)\n\n// CSS styles in JavaScript Object\nconst buttonStyles = {\n backgroundColor: '#61dbfb',\n padding: 10,\n border: 'none',\n borderRadius: 5,\n margin: 3,\n cursor: 'pointer',\n fontSize: 18,\n color: 'white',\n}\n\nconst Header = (props) => {\n const {\n welcome,\n title,\n subtitle,\n author: { firstName, lastName },\n date,\n } = props.data\n\n return (\n
    \n
    \n

    {welcome}

    \n

    {title}

    \n

    {subtitle}

    \n

    \n {firstName} {lastName}\n

    \n {date}\n
    \n
    \n )\n}\n\nconst Count = ({ count, addOne, minusOne }) => (\n
    \n

    {count}

    \n
    \n
    \n
    \n)\n\n// TechList Component\nconst TechList = (props) => {\n const { techs } = props\n const techsFormatted = techs.map((tech) =>
  • {tech}
    • )\n return techsFormatted\n}\n\n// Main Component\nconst Main = (props) => {\n const {\n techs,\n user,\n greetPeople,\n handleTime,\n changeBackground,\n count,\n addOne,\n minusOne,\n } = props\n return (\n
    \n
    \n

    Prerequisite to get started react.js:

    \n
      \n \n
    \n \n \n
    \n
    \n )\n}\n\n// Footer Component\nconst Footer = (props) => {\n return (\n
    \n
    \n

    Copyright {props.date.getFullYear()}

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n const [count, setCount] = useState(0)\n const [backgroundColor, setBackgroundColor] = useState('')\n\n const showDate = (time) => {\n const months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ]\n\n const month = months[time.getMonth()].slice(0, 3)\n const year = time.getFullYear()\n const date = time.getDate()\n return ` ${month} ${date}, ${year}`\n }\n const addOne = () => {\n setCount(count + 1)\n }\n\n // method which subtract one to the state\n const minusOne = () => {\n setCount(count - 1)\n }\n const handleTime = () => {\n alert(showDate(new Date()))\n }\n const greetPeople = () => {\n alert('Welcome to 30 Days Of React Challenge, 2020')\n }\n const changeBackground = () => {}\n\n const data = {\n welcome: 'Welcome to 30 Days Of React',\n title: 'Getting Started React',\n subtitle: 'JavaScript Library',\n author: {\n firstName: 'Asabeneh',\n lastName: 'Yetayeh',\n },\n date: 'Oct 7, 2020',\n }\n const techs = ['HTML', 'CSS', 'JavaScript']\n\n const user = { ...data.author, image: asabenehImage }\n\n return (\n
    \n {backgroundColor}\n
    \n \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks.md", "content": "
    \n

    30 Days Of React: Form Using React Hooks

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 21](../21_Introducing_Hooks/21_introducing_hooks.md) | [Day 23>>](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_22.jpg)\n\n- [Introducing React Hook](#introducing-react-hook)\n - [Basic Hooks](#basic-hooks)\n - [State Hook](#state-hook)\n - [Effect Hook](#effect-hook)\n - [Context Hook](#context-hook)\n - [Additional Hook](#additional-hook)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n\n# Forms\n\nForm is used to collect data from a user. Once in a while we use form to fill our information on a paper or on a website. Either to sign up, sign in or to apply for a job, we fill different form fields to submit our data to remote database. We encounter different form fields when we fill a form such as simple text, email, password, telephone, date, checkbox, radio button, option selection and text area field. Currently, HTML5 has provide quite a lot of field types. You may have a look at the following available HTML5 input types.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\nAnother HTML fields to get data from a form are textarea and select with options elements.\n\n```html\n\n\n\n```\n\nNow, you know most of the fields we need to get data from a form. Let's start with an input with type text field. In the previous lessons, we saw different types of events and today we will focus on more of _onChange_ event type which triggers whenever an input field data changes. Input field has by default a memory to store input data but in this section we control that using state and we implement a controlled input. Today we will implement a controlled input.\n\n## Getting data from an input field\n\nSo far used class based components to use state and to get data from controlled input but in this section we will use useState hooks. Now, it is time to learn how to get data from an input field using hooks. We need an input field, event listener (onChange) and state to get data from a controlled input. See the example below. The h1 element below the input tag display what we write on the input. Check live [demo](https://codepen.io/Asabeneh/full/jOrVqbv).\n\nThe input element has many attributes such as value, name, id, placeholder, type and event handler. In addition, we can link a label and an input field using an id of input field and htmlFor of the label.If label and input are linked it will focus the input when we click on label. Look at the example give below.\n\n```js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n // initial state and method to update state\n const [firstName, setFirstName] = useState('')\n const handleChange = (e) => {\n const value = e.target.value\n setFirstName(value)\n }\n return (\n
    \n \n \n

    {firstName}

    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nWe usually use form to handle user information. Let us move to form section and make use the form element.\n\n## Getting multiple input data from form\n\nIn this section we will develop a small form which collect user information. Our user is a student. We use a parent form element and certain number of input elements to collect user information. In addition to that we will have event listener for the form (onSubmit) and for the inputs (onChange). See the following example try to see the commonts too. You can also check the live [demo](https://codepen.io/Asabeneh/full/eYNvJda).\n\nAs you can see we have four fields, if you we create a separate method to update all the fields we will have method for updating(firstName, lastName, country and title) instead let's have one method which can update all.\n\n```js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const initialState = {\n firstName: '',\n lastName: '',\n country: '',\n title: '',\n }\n const [formData, setData] = useState(initialState)\n\n const onChange = (e) => {\n const { name, value } = e.target\n setData({ ...formData, [name]: value })\n }\n const onSubmit = (e) => {\n /* \n e.preventDefault()\n stops the default behavior of form element\n specifically refreshing of page\n */\n e.preventDefault()\n\n /*\n the is the place where we connect backend api \n to send the data to the database\n */\n console.log(formData)\n }\n\n // accessing the state value by destrutcturing the state\n const { firstName, lastName, title, country } = formData\n return (\n
    \n

    Add Student

    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n\n \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nThe above form handles only text types but do have different input field types. Let's do another form which handle all the different input field types.\n\n## Get data from different input field types\n\n```js\n// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst options = [\n {\n value: '',\n label: '-- Select Country--',\n },\n {\n value: 'Finland',\n label: 'Finland',\n },\n {\n value: 'Sweden',\n label: 'Sweden',\n },\n {\n value: 'Norway',\n label: 'Norway',\n },\n {\n value: 'Denmark',\n label: 'Denmark',\n },\n]\n\n// mapping the options to list(array) of JSX options\n\nconst selectOptions = options.map(({ value, label }) => (\n \n))\n\nconst App = (props) => {\n const initialState = {\n firstName: '',\n lastName: '',\n email: '',\n title: '',\n country: '',\n tel: '',\n dateOfBirth: '',\n favoriteColor: '',\n weight: '',\n gender: '',\n file: '',\n bio: '',\n skills: {\n html: false,\n css: false,\n javascript: false,\n },\n }\n const [formData, setFormData] = useState(initialState)\n\n const onChange = (e) => {\n /*\n we can get the name and value like: e.target.name, e.target.value\n Wwe can also destructure name and value from e.target\n const name = e.target.name\n const value = e.target.value\n */\n const { name, value, type, checked } = e.target\n /*\n [variablename] we can make a value stored in a certain variable could be a key for an object, in this case a key for the state\n */\n\n if (type === 'checkbox') {\n setFormData({\n ...formData,\n skills: { ...formData.skills, [name]: checked },\n })\n } else if (type === 'file') {\n setFormData({ ...formData, [name]: e.target.files[0] })\n } else {\n setFormData({ ...formData, [name]: value })\n }\n }\n const onSubmit = (e) => {\n /*\n e.preventDefault()\n stops the default behavior of form element\n specifically refreshing of page\n */\n e.preventDefault()\n const {\n firstName,\n lastName,\n title,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills,\n } = formData\n\n const formattedSkills = []\n for (const key in skills) {\n console.log(key)\n if (skills[key]) {\n formattedSkills.push(key.toUpperCase())\n }\n }\n const data = {\n firstName,\n lastName,\n title,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills: formattedSkills,\n }\n /*\n the is the place where we connect backend api \n to send the data to the database\n */\n console.log(data)\n }\n\n // accessing the state value by destrutcturing the state\n const {\n firstName,\n lastName,\n title,\n country,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n gender,\n bio,\n } = formData\n return (\n
    \n

    Add Student

    \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n {selectOptions}\n \n
    \n\n
    \n

    Gender

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n

    Select your skills

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Form Validation\n\n## What is validation?\n\nThe action or process of checking or proving the validity or accuracy of something in this case data.\n\n## What is the purpose of validation\n\nThe main purpose to validation is to get a desired data from users. In addition, to prevent malicious users and data.\n\n## Validation Types\n\nValidation can be done in client side or sever side. At the moment, we are using React which is a front end technology and we use client side validation.A validation can implement using HTML5 built-in validation or using JavaScript(using regular expression).\n\nIn the following snippet of code, a validation has been implemented the first field. Try to understand how it works. The onBlur event has been used to check validity when the input is not focused.\n\n```js\n// index.js\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst options = [\n {\n value: '',\n label: '-- Select Country--',\n },\n {\n value: 'Finland',\n label: 'Finland',\n },\n {\n value: 'Sweden',\n label: 'Sweden',\n },\n {\n value: 'Norway',\n label: 'Norway',\n },\n {\n value: 'Denmark',\n label: 'Denmark',\n },\n]\n\n// mapping the options to list(array) of JSX options\n\nconst selectOptions = options.map(({ value, label }) => (\n \n))\n\nconst App = (props) => {\n const initialState = {\n firstName: '',\n lastName: '',\n email: '',\n title: '',\n country: '',\n tel: '',\n dateOfBirth: '',\n favoriteColor: '',\n weight: '',\n gender: '',\n file: '',\n bio: '',\n skills: {\n html: false,\n css: false,\n javascript: false,\n },\n touched: {\n firstName: false,\n lastName: false,\n },\n }\n const [formData, setFormData] = useState(initialState)\n\n const onChange = (e) => {\n /*\n we can get the name and value like: e.target.name, e.target.value\n Wwe can also destructure name and value from e.target\n const name = e.target.name\n const value = e.target.value\n */\n const { name, value, type, checked } = e.target\n /*\n [variablename] we can make a value stored in a certain variable could be a key for an object, in this case a key for the state\n */\n\n if (type === 'checkbox') {\n setFormData({\n ...formData,\n skills: { ...formData.skills, [name]: checked },\n })\n } else if (type === 'file') {\n setFormData({ ...formData, [name]: e.target.files[0] })\n } else {\n setFormData({ ...formData, [name]: value })\n }\n }\n const onSubmit = (e) => {\n /*\n e.preventDefault()\n stops the default behavior of form element\n specifically refreshing of page\n */\n e.preventDefault()\n const {\n firstName,\n lastName,\n title,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills,\n } = formData\n\n const formattedSkills = []\n for (const key in skills) {\n console.log(key)\n if (skills[key]) {\n formattedSkills.push(key.toUpperCase())\n }\n }\n const data = {\n firstName,\n lastName,\n title,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills: formattedSkills,\n }\n /*\n the is the place where we connect backend api \n to send the data to the database\n */\n console.log(data)\n }\n const onBlur = (e) => {\n const { name } = e.target\n setFormData({ ...formData, touched: { ...formData.touched, [name]: true } })\n }\n const validate = () => {\n // Object to collect error feedback and to display on the form\n const errors = {\n firstName: '',\n }\n\n if (\n (formData.touched.firstName && formData.firstName.length < 3) ||\n (formData.touched.firstName && formData.firstName.length > 12)\n ) {\n errors.firstName = 'First name must be between 2 and 12'\n }\n return errors\n }\n\n // accessing the state value by destrutcturing the state\n const {\n firstName,\n lastName,\n title,\n country,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n gender,\n bio,\n } = formData\n\n const errors = validate()\n\n return (\n
    \n

    Add Student

    \n
    \n
    \n
    \n \n \n
    \n {errors.firstName && {errors.firstName}}\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n {selectOptions}\n \n
    \n\n
    \n

    Gender

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n

    Select your skills

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n# Exercises\n\n## Exercises: Level 1\n\n1. What is the importance of form?\n2. How many input types do you know?\n3. Mention at least four attributes of an input element\n4. What is the importance of htmlFor?\n5. Write an input type which is not given in the example if there is?\n6. What is a controlled input?\n7. What do you need to write a controlled input?\n8. What event type do you use to listen changes on an input field?\n9. What is the value of a checked checkbox?\n10. When do you use onChange, onBlur, onSubmit?\n11. What is the purpose of writing e.preventDefault() inside the submit handler method?\n12. How do you bind data in React? The first input field example is data binding in React.\n13. What is validation?\n14. What is the event type you use to listen when an input changes?\n15. What are event types do you use to validate an input?\n\n## Exercises: Level 2\n\n1. Validate the form given above (a gif image or a video will be provided later). First try to validate without using any library then try it with [validator.js](https://www.npmjs.com/package/validator).\n\n## Exercises: Level 3\n\nComing ..\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 21](../21_Introducing_Hooks/21_introducing_hooks.md) | [Day 23>>](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md)\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/README.md", "content": "# 30 Days of React App: Day 22\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/index.js", "content": "import React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst options = [\n {\n value: '',\n label: '-- Select Country--',\n },\n {\n value: 'Finland',\n label: 'Finland',\n },\n {\n value: 'Sweden',\n label: 'Sweden',\n },\n {\n value: 'Norway',\n label: 'Norway',\n },\n {\n value: 'Denmark',\n label: 'Denmark',\n },\n]\n\n// mapping the options to list(array) of JSX options\n\nconst selectOptions = options.map(({ value, label }) => (\n \n))\n\nconst App = (props) => {\n const initialState = {\n firstName: '',\n lastName: '',\n email: '',\n title: '',\n country: '',\n tel: '',\n dateOfBirth: '',\n favoriteColor: '',\n weight: '',\n gender: '',\n file: '',\n bio: '',\n skills: {\n html: false,\n css: false,\n javascript: false,\n },\n touched: {\n firstName: false,\n lastName: false,\n },\n }\n const [formData, setFormData] = useState(initialState)\n\n const onChange = (e) => {\n /*\n we can get the name and value like: e.target.name, e.target.value\n Wwe can also destructure name and value from e.target\n const name = e.target.name\n const value = e.target.value\n */\n const { name, value, type, checked } = e.target\n /*\n [variablename] we can make a value stored in a certain variable could be a key for an object, in this case a key for the state\n */\n\n if (type === 'checkbox') {\n setFormData({\n ...formData,\n skills: { ...formData.skills, [name]: checked },\n })\n } else if (type === 'file') {\n setFormData({ ...formData, [name]: e.target.files[0] })\n } else {\n setFormData({ ...formData, [name]: value })\n }\n }\n const onSubmit = (e) => {\n /*\n e.preventDefault()\n stops the default behavior of form element\n specifically refreshing of page\n */\n e.preventDefault()\n const {\n firstName,\n lastName,\n title,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills,\n } = formData\n\n const formattedSkills = []\n for (const key in skills) {\n console.log(key)\n if (skills[key]) {\n formattedSkills.push(key.toUpperCase())\n }\n }\n const data = {\n firstName,\n lastName,\n title,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n country,\n gender,\n bio,\n file,\n skills: formattedSkills,\n }\n /*\n the is the place where we connect backend api \n to send the data to the database\n */\n console.log(data)\n }\n const onBlur = (e) => {\n const { name } = e.target\n setFormData({ ...formData, touched: { ...formData.touched, [name]: true } })\n }\n const validate = () => {\n // Object to collect error feedback and to display on the form\n const errors = {\n firstName: '',\n }\n\n if (\n (formData.touched.firstName && formData.firstName.length < 3) ||\n (formData.touched.firstName && formData.firstName.length > 12)\n ) {\n errors.firstName = 'First name must be between 2 and 12'\n }\n return errors\n }\n\n // accessing the state value by destrutcturing the state\n const {\n firstName,\n lastName,\n title,\n country,\n email,\n tel,\n dateOfBirth,\n favoriteColor,\n weight,\n gender,\n bio,\n } = formData\n\n const errors = validate()\n\n return (\n
    \n

    Add Student

    \n
    \n
    \n
    \n \n \n
    \n {errors.firstName && {errors.firstName}}\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n {selectOptions}\n \n
    \n\n
    \n

    Gender

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n

    Select your skills

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md", "content": "
    \n

    30 Days Of React: Fetching Data Using Hooks

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>](../24_projects/24_projects.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_23.jpg)\n\n- [Introducing React Hook](#introducing-react-hook)\n - [Basic Hooks](#basic-hooks)\n - [State Hook](#state-hook)\n - [Effect Hook](#effect-hook)\n - [Context Hook](#context-hook)\n - [Additional Hook](#additional-hook)\n- [Exercises](#exercises)\n - [Exercises: Level 1](#exercises-level-1)\n\n# Fetching Data Using Hooks\n\nIn the previous sections, you have learned how to fetch data using fetch and axios. In this section , we will use the useEffect hook to fetch data. We can use fetch or axios but I prefer to use axios. In React hooks, you don't have to use componentDidMount life cycle separately to fetch data. The useEffect has incorporate the React life cycle methods(mounting, updating and unmounting). Let's convert the code we wrote on day 18 to React hooks. We need to import the useEffect from react. The useEffect takes to argument that is a callback and an array. If the array is empty it behaves as componentDidMount life cycle where if the array has other properties, it will behave as updating too.\n\n```js\nimport React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport ReactDOM, { findDOMNode } from 'react-dom'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n // setting initial state and method to update state\n const [data, setData] = useState([])\n\n useEffect(() => {\n fetchData()\n }, [])\n\n const fetchData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n\n return (\n
    \n

    Fetching Data Using Hook

    \n

    Calling API

    \n
    \n

    There are {data.length} countries in the api

    \n
    \n {data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n# Exercises\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>](../24_projects/24_projects.md)\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/README.md", "content": "# 30 Days of React App: Day 23\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js", "content": "import React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport ReactDOM from 'react-dom'\n\nconst Country = ({ country: { name, flag } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n // setting initial state and method to update state\n const [data, setData] = useState([])\n\n useEffect(() => {\n fetchData()\n }, [])\n\n const fetchData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n\n return (\n
    \n

    Fetching Data Using Hook

    \n

    Calling API

    \n
    \n

    There are {data.length} countries in the api

    \n
    \n {data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "24_projects/24_projects.md", "content": "
    \n

    30 Days Of React: Projects

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 23](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md) | [Day 25>>](../25_Custom_Hooks/25_custom_hooks.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_24.jpg)\n\n# Project Using React Hooks\n\n# Exercises\n\n1 Build the following application using [countries API](https://restcountries.eu/rest/v2/all).\n[DEMO](https://www.30daysofreact.com/day-23/countries-data)\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 23](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md) | [Day 25>>](../25_Custom_Hooks/25_custom_hooks.md)\n" }, { "path": "24_projects/24_projects_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "24_projects/24_projects_boilerplate/README.md", "content": "# 30 Days of React App: Day 24\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "24_projects/24_projects_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "24_projects/24_projects_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "24_projects/24_projects_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "24_projects/24_projects_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "24_projects/24_projects_boilerplate/src/index.js", "content": "import React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport ReactDOM from 'react-dom'\n\nconst Country = ({ country: { name, flag } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n // setting initial state and method to update state\n const [data, setData] = useState([])\n\n useEffect(() => {\n fetchData()\n }, [])\n\n const fetchData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n\n return (\n
    \n

    Fetching Data Using Hook

    \n

    Calling API

    \n
    \n

    There are {data.length} countries in the api

    \n
    \n {data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "24_projects/24_projects_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "25_Custom_Hooks/25_custom_hooks.md", "content": "
    \n

    30 Days Of React: Custom Hooks

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 24](../24_projects/24_projects.md) | [Day 26>>](../26_Context/26_context.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_25.jpg)\n\n# Custom Hooks\n\nIt is possible to make a custom hook on top of the available React hooks. For instance, when we fetch data we with use either fetch or axios to send an HTTP request and useEffect hooks to manage the React life cycle. Let's build useFetch custom hook on top of useEffect and useState.\n\nWe wrote this snippet of code in the previous section and we use useEffect hooks to fetch data from API. Now, let's convert this code to a custom hook. The naming convention for a custom hook is camelCase and it starts with the word use that is why we called our custom hook, useFetch.\n\n```js\nimport React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport ReactDOM, { findDOMNode } from 'react-dom'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n // setting initial state and method to update state\n const [data, setData] = useState([])\n\n useEffect(() => {\n fetchData()\n }, [])\n\n const fetchData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n\n return (\n
    \n

    Fetching Data Using Hook

    \n

    Calling API

    \n
    \n

    There are {data.length} countries in the api

    \n
    \n {data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nCreate a file name useFetch.js, and import useState and useEffect. Then transfer the state, useEffect and fetchData function part of the above code to the useFetch.js.\n\n```js\nimport { useState, useEffect } from 'react'\n\nconst useFetch = () => {\n const [data, setData] = useState([])\n\n const fetchData = async () => {\n const url = 'https://restcountries.eu/rest/v2/all'\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n\n useEffect(() => {\n fetchData()\n }, [])\n}\n```\n\nThen let's make the useFetch function to take a parameter. When we fetch data the only thing which changes is the API therefore let's pass a URL parameter for the function.\n\n```js\nimport { useState, useEffect } from 'react'\n\nconst useFetch = (url) => {\n const [data, setData] = useState([])\n\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n\n useEffect(() => {\n fetchData()\n }, [])\n}\n\nexport default useFetch\n```\n\nWith the above code, we should manage to fetch the data but it is advisable to put the function in the useEffect and let's move the function code the useEffect.\n\n```js\nimport { useState, useEffect } from 'react'\n\nexport const useFetch = (url) => {\n const [data, setData] = useState([])\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n fetchData()\n }, [url])\n\n return data\n}\n\nexport default useFetch\n```\n\nNow, let's combine everything and make it work.\n\n```js\n// index.js\n\nimport React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport ReactDOM, { findDOMNode } from 'react-dom'\nimport useFetch from './useFetch'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n const url = 'https://restcountries.eu/rest/v2/all'\n const data = useFetch(url)\n\n return (\n
    \n

    Custom Hooks

    \n

    Calling API

    \n
    \n

    There are {data.length} countries in the api

    \n
    \n {data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\nThe useState and useEffect hooks are most common React hooks which you use on daily bases. In addition to the basic hook, there are additional hooks which are not used often. You do not have to know how to use all the hooks. The useState, useEffect and useRef are very important hooks and it is recommended to know how to use them.\n\n# Exercises\n\nNote: Continue building the countries application\n\n1 Build the following application using [countries API](https://restcountries.eu/rest/v2/all).\n[DEMO](https://www.30daysofreact.com/day-23/countries-data)\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 24](../24_projects/24_projects.md) | [Day 26>>](../26_Context/26_context.md)\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/README.md", "content": "# 30 Days of React App: Day 25\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/src/index.js", "content": "import React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport ReactDOM, { findDOMNode } from 'react-dom'\nimport useFetch from './useFetch'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n const url = 'https://restcountries.eu/rest/v2/all'\n const data = useFetch(url)\n\n return (\n
    \n

    Custom Hooks

    \n

    Calling API

    \n
    \n

    There are {data.length} countries in the api

    \n
    \n {data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "25_Custom_Hooks/25_custom_hooks_boilerplate/src/useFetch.js", "content": "import { useState, useEffect } from 'react'\n\nexport const useFetch = (url) => {\n const [data, setData] = useState([])\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n fetchData()\n }, [url])\n\n return data\n}\n\nexport default useFetch\n" }, { "path": "26_Context/26_context.md", "content": "
    \n

    30 Days Of React: Context

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>](../27_Ref/27_ref.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_26.jpg)\n\n# Context\n\nContext allow as to pass data through the component tree without having to pass props down manually to every child component at every level.\n\nIn React, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.\n\n## When to Use Context\n\nContext is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:\n\nThe above text has been taken from [react documentation](https://reactjs.org/docs/context.html) without any change.\n\nIt seems the react documentation has pretty good information about context, you can go through the [react documentation](https://reactjs.org/docs/context.html).\n\n# Exercises\n\n🎉 CONGRATULATIONS ! 🎉\n[<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>](../27_Ref/27_ref.md)\n" }, { "path": "26_Context/26_context_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "26_Context/26_context_boilerplate/README.md", "content": "# 30 Days of React App: Day 25\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "26_Context/26_context_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "26_Context/26_context_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "26_Context/26_context_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "26_Context/26_context_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "26_Context/26_context_boilerplate/src/index.js", "content": "import React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport ReactDOM, { findDOMNode } from 'react-dom'\nimport useFetch from './useFetch'\n\nconst Country = ({ country: { name, flag, population } }) => {\n return (\n
    \n
    \n {name}\n
    \n

    {name.toUpperCase()}

    \n
    \n

    \n Population: \n {population}\n

    \n
    \n
    \n )\n}\n\nconst App = (props) => {\n const url = 'https://restcountries.eu/rest/v2/all'\n const data = useFetch(url)\n\n return (\n
    \n

    Custom Hooks

    \n

    Calling API

    \n
    \n

    There are {data.length} countries in the api

    \n
    \n {data.map((country) => (\n \n ))}\n
    \n
    \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "26_Context/26_context_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "26_Context/26_context_boilerplate/src/useFetch.js", "content": "import { useState, useEffect } from 'react'\n\nexport const useFetch = (url) => {\n const [data, setData] = useState([])\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n fetchData()\n }, [url])\n\n return data\n}\n\nexport default useFetch\n" }, { "path": "27_Ref/27_ref.md", "content": "
    \n

    30 Days Of React: useRef

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>]()\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_27.jpg)\n\n# useRef\n\nIn this challenge we have covered, how to handle uncontrolled input data. In this section, we will use the useRef hooks to get input data or to access any DOM element in your React application.\n\nThe useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.\n\nIn the following example, we see how to get data from input and access elements from the DOM tree using useRef hook.\n\n## Getting Data from input\n\nLet's get data from uncontrolled input element.\n\n```js\nimport React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n let value = ref.current.value\n alert(value)\n }\n return (\n
    \n

    How to use data from uncontrolled input using useRef

    \n \n
    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Focus\n\nUsing the useRef we can trigger the focus event on input.\n\n```js\nimport React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n ref.current.focus()\n }\n return (\n
    \n

    How to focus on input element useRef

    \n \n
    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Getting Content from DOM tree\n\nDon't touch the DOM when you develop a React application because React has its own way to manipulate the DOM using the virtual DOM. In case, we get interested to get some content from the DOM tree we can use the useRef hook. See the example:\n\n```js\nimport React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n let content = ref.current.textContent\n alert(content)\n console.log(content)\n }\n return (\n
    \n

    How to getting content from the DOM tree

    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n```\n\n## Accessing and Styling a DOM element\n\nWe can access and style an element from the DOM tree. See the example below:\n\n```js\nimport React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n ref.current.style.backgroundColor = '#61dbfb'\n ref.current.style.padding = '50px'\n ref.current.style.textAlign = 'center'\n }\n return (\n
    \n

    How to style HTML from the DOM tree using useRef

    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement\n```\n\n# Exercises\n\n1. Develop the following [application](https://www.30daysofreact.com/day-27/hexadecimal-colors). The application generates 27 hexadecimal colors by default. If the generate button get clicked it will generate another new 27 hexadecimal colors.\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>]()\n" }, { "path": "27_Ref/27_ref_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "27_Ref/27_ref_boilerplate/README.md", "content": "# 30 Days of React App: Day 25\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "27_Ref/27_ref_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "27_Ref/27_ref_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "27_Ref/27_ref_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "27_Ref/27_ref_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "27_Ref/27_ref_boilerplate/src/index.js", "content": "import React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n ref.current.style.backgroundColor = '#61dbfb'\n ref.current.style.padding = '50px'\n ref.current.style.textAlign = 'center'\n }\n return (\n
    \n

    How to style HTML from the DOM tree using useRef

    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "27_Ref/27_ref_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "27_Ref/27_ref_boilerplate/src/useFetch.js", "content": "import { useState, useEffect } from 'react'\n\nexport const useFetch = (url) => {\n const [data, setData] = useState([])\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n fetchData()\n }, [url])\n\n return data\n}\n\nexport default useFetch\n" }, { "path": "28_project/28_project.md", "content": "
    \n

    30 Days Of React: Project

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]()\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_28.jpg)\n\n# Projects\n\nCreate Read Delete and Update(CRUD)\nMost applications use CRUD operations. For instance, you have been Reading(R) data by fetching from the cat API and countries API. You have been creating(C) when you use input field and item. However, we did not implement updating and deleting functionality so far. Since CRUD is a common operation almost in all big applications it is good to know how to implement it. In this section, we will develop a small application which has creating, reading, updating and deleting functionality.\n\nThe todo list is a very common example to learn and master CRUD operations in almost every libraries and frameworks. I would also recommend you to develop a todo list, note taking or a tinny blog application for the sake of mastering CRUD.\n\nIn this section, you and I will develop an old version of twitter post.\n\n# Exercises\n\n1. Develop the following application, [twitter tweets](https://www.30daysofreact.com/day-28/twitter-clone). The application has all the CRUD operations. \n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]()\n" }, { "path": "28_project/28_project_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "28_project/28_project_boilerplate/README.md", "content": "# 30 Days of React App: Day 25\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "28_project/28_project_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "28_project/28_project_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "28_project/28_project_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "28_project/28_project_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "28_project/28_project_boilerplate/src/index.js", "content": "import React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n ref.current.style.backgroundColor = '#61dbfb'\n ref.current.style.padding = '50px'\n ref.current.style.textAlign = 'center'\n }\n return (\n
    \n

    How to style HTML from the DOM tree using useRef

    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "28_project/28_project_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "28_project/28_project_boilerplate/src/useFetch.js", "content": "import { useState, useEffect } from 'react'\n\nexport const useFetch = (url) => {\n const [data, setData] = useState([])\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n fetchData()\n }, [url])\n\n return data\n}\n\nexport default useFetch\n" }, { "path": "29_explore/29_explore.md", "content": "
    \n

    30 Days Of React: Project

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 28](../27_Ref/27_ref.md) | [Day 29 >>](../29_explore/29_explore.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_29.jpg)\n\n# Explore\n\nCongratulations for making to this far. You are are unstoppable. So far you have learned lots of concepts and also built several mini-projects. I believe those mini-projects have helped you to understand React very well. After this, you can work on a sole or group React project. You can also expand your skill by using different packages (classnames, lodash, react-helmet, recharts, etc.), implementing PWA, styled components and CSS libraries with React application. In addition, learn SEO, accessibility, responsiveness and browser compatibility. Explore more and increase your knowledge in the domain. Read the [React documentation](https://reactjs.org/). Now, you should feel confident enough about your React skill and you should also start applying for entry or junior softer developer or front end developer positions. No one will tell you that you are read for a job, so you should make yourself ready.\n\n# Exercises\n\n## Exercises: Level 1\n\n1. Polish your GitHub and make your projects as clean as possible\n2. Work on your portfolio\n3. Create LinkedIn account if you don't have yet. If you have LinkedIn account make it as attractive as possible. It will give a high chance for potential recruiters and companies to know more about you. In addition, there are lots of materials and people who can be used as motivation on daily basis.\n4. Follow the author on LinkedIn, Twitter or GitHuh if he created impact on your life.\n5. Become an ambassador of CodingForAll by supporting and advocating our causes.\n6. Write about 30DaysOfReact on different platforms and create an opportunity for others to get a valuable skill.\n\n## Exercises: Level 2\n\nComing ...\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]()\n" }, { "path": "29_explore/29_explore_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "29_explore/29_explore_boilerplate/README.md", "content": "# 30 Days of React App: Day 25\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "29_explore/29_explore_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "29_explore/29_explore_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "29_explore/29_explore_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "29_explore/29_explore_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "29_explore/29_explore_boilerplate/src/index.js", "content": "import React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n ref.current.style.backgroundColor = '#61dbfb'\n ref.current.style.padding = '50px'\n ref.current.style.textAlign = 'center'\n }\n return (\n
    \n

    How to style HTML from the DOM tree using useRef

    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "29_explore/29_explore_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "29_explore/29_explore_boilerplate/src/useFetch.js", "content": "import { useState, useEffect } from 'react'\n\nexport const useFetch = (url) => {\n const [data, setData] = useState([])\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n fetchData()\n }, [url])\n\n return data\n}\n\nexport default useFetch\n" }, { "path": "30_conclusions/30_conclusions.md", "content": "
    \n

    30 Days Of React: Conclusions

    \n \n \n \n \n \"Twitter\n \n\nAuthor:\nAsabeneh Yetayeh
    \n October, 2020\n    \n\n
    \n\n[<< Day 29](../29_explore/29_explore.md)\n\n![30 Days of React banner](../images/30_days_of_react_banner_day_30.jpg)\n\n# Conclusions\n\nIn this challenge, we have covered React with and without hooks. All the most important features of React has been included. If you did all the exercises and projects in this challenge I would say your React and JavaScript level is very high. You are ready for developer positions. This challenge was made in this month and it will be updated and improved in the coming months. We will correct grammar and typo mistakes. Some content might be added, the pending exercises in some days challenge will be included. It is good to check it at some point, because there might be some interesting projects.\nYou have been learning and coding for the last 30 days and you made it to this day. You are a special person and you deserve recognition. Therefore, you can claim a 30 Days React challenge completion certificate. In addition, celebrate your success with a friend and family. I will see you in another challenge or courses. Thank you for being a proactive community member and part of the challenge. Finally, recommend the material for a family, friend or enemy if you believe that it helped you and of course support the author to create more learning materials.\n\n## Testimony\nNow it is time to express your thoughts about the Author and 30DaysOfReact. You can leave your testimonial on this [link](https://www.asabeneh.com/testimonials)\n\n\n# Exercises\n\n🎉 CONGRATULATIONS ! 🎉\n\n[<< Day 29](../29_explore/29_explore.md)\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/README.md", "content": "# 30 Days of React App: Day 25\n\nIn the project directory, you can run to start the project\n\n### `npm start`\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/package.json", "content": "{\n \"name\": \"30-days-of-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"3.4.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/public/index.html", "content": "\n\n \n \n \n \n \n\n 30 Days Of React App\n \n \n \n \n
    \n \n\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/src/data/countries.js", "content": "export const countriesData = [\n {\n name: 'Afghanistan',\n capital: 'Kabul',\n languages: ['Pashto', 'Uzbek', 'Turkmen'],\n population: 27657145,\n flag: 'https://restcountries.eu/data/afg.svg',\n currency: 'Afghan afghani',\n },\n {\n name: 'Åland Islands',\n capital: 'Mariehamn',\n languages: ['Swedish'],\n population: 28875,\n flag: 'https://restcountries.eu/data/ala.svg',\n currency: 'Euro',\n },\n {\n name: 'Albania',\n capital: 'Tirana',\n languages: ['Albanian'],\n population: 2886026,\n flag: 'https://restcountries.eu/data/alb.svg',\n currency: 'Albanian lek',\n },\n {\n name: 'Algeria',\n capital: 'Algiers',\n languages: ['Arabic'],\n population: 40400000,\n flag: 'https://restcountries.eu/data/dza.svg',\n currency: 'Algerian dinar',\n },\n {\n name: 'American Samoa',\n capital: 'Pago Pago',\n languages: ['English', 'Samoan'],\n population: 57100,\n flag: 'https://restcountries.eu/data/asm.svg',\n currency: 'United State Dollar',\n },\n {\n name: 'Andorra',\n capital: 'Andorra la Vella',\n languages: ['Catalan'],\n population: 78014,\n flag: 'https://restcountries.eu/data/and.svg',\n currency: 'Euro',\n },\n {\n name: 'Angola',\n capital: 'Luanda',\n languages: ['Portuguese'],\n population: 25868000,\n flag: 'https://restcountries.eu/data/ago.svg',\n currency: 'Angolan kwanza',\n },\n {\n name: 'Anguilla',\n capital: 'The Valley',\n languages: ['English'],\n population: 13452,\n flag: 'https://restcountries.eu/data/aia.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Antarctica',\n capital: '',\n languages: ['English', 'Russian'],\n population: 1000,\n flag: 'https://restcountries.eu/data/ata.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Antigua and Barbuda',\n capital: \"Saint John's\",\n languages: ['English'],\n population: 86295,\n flag: 'https://restcountries.eu/data/atg.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Argentina',\n capital: 'Buenos Aires',\n languages: ['Spanish', 'Guaraní'],\n population: 43590400,\n flag: 'https://restcountries.eu/data/arg.svg',\n currency: 'Argentine peso',\n },\n {\n name: 'Armenia',\n capital: 'Yerevan',\n languages: ['Armenian', 'Russian'],\n population: 2994400,\n flag: 'https://restcountries.eu/data/arm.svg',\n currency: 'Armenian dram',\n },\n {\n name: 'Aruba',\n capital: 'Oranjestad',\n languages: ['Dutch', '(Eastern) Punjabi'],\n population: 107394,\n flag: 'https://restcountries.eu/data/abw.svg',\n currency: 'Aruban florin',\n },\n {\n name: 'Australia',\n capital: 'Canberra',\n languages: ['English'],\n population: 24117360,\n flag: 'https://restcountries.eu/data/aus.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Austria',\n capital: 'Vienna',\n languages: ['German'],\n population: 8725931,\n flag: 'https://restcountries.eu/data/aut.svg',\n currency: 'Euro',\n },\n {\n name: 'Azerbaijan',\n capital: 'Baku',\n languages: ['Azerbaijani'],\n population: 9730500,\n flag: 'https://restcountries.eu/data/aze.svg',\n currency: 'Azerbaijani manat',\n },\n {\n name: 'Bahamas',\n capital: 'Nassau',\n languages: ['English'],\n population: 378040,\n flag: 'https://restcountries.eu/data/bhs.svg',\n currency: 'Bahamian dollar',\n },\n {\n name: 'Bahrain',\n capital: 'Manama',\n languages: ['Arabic'],\n population: 1404900,\n flag: 'https://restcountries.eu/data/bhr.svg',\n currency: 'Bahraini dinar',\n },\n {\n name: 'Bangladesh',\n capital: 'Dhaka',\n languages: ['Bengali'],\n population: 161006790,\n flag: 'https://restcountries.eu/data/bgd.svg',\n currency: 'Bangladeshi taka',\n },\n {\n name: 'Barbados',\n capital: 'Bridgetown',\n languages: ['English'],\n population: 285000,\n flag: 'https://restcountries.eu/data/brb.svg',\n currency: 'Barbadian dollar',\n },\n {\n name: 'Belarus',\n capital: 'Minsk',\n languages: ['Belarusian', 'Russian'],\n population: 9498700,\n flag: 'https://restcountries.eu/data/blr.svg',\n currency: 'New Belarusian ruble',\n },\n {\n name: 'Belgium',\n capital: 'Brussels',\n languages: ['Dutch', 'French', 'German'],\n population: 11319511,\n flag: 'https://restcountries.eu/data/bel.svg',\n currency: 'Euro',\n },\n {\n name: 'Belize',\n capital: 'Belmopan',\n languages: ['English', 'Spanish'],\n population: 370300,\n flag: 'https://restcountries.eu/data/blz.svg',\n currency: 'Belize dollar',\n },\n {\n name: 'Benin',\n capital: 'Porto-Novo',\n languages: ['French'],\n population: 10653654,\n flag: 'https://restcountries.eu/data/ben.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Bermuda',\n capital: 'Hamilton',\n languages: ['English'],\n population: 61954,\n flag: 'https://restcountries.eu/data/bmu.svg',\n currency: 'Bermudian dollar',\n },\n {\n name: 'Bhutan',\n capital: 'Thimphu',\n languages: ['Dzongkha'],\n population: 775620,\n flag: 'https://restcountries.eu/data/btn.svg',\n currency: 'Bhutanese ngultrum',\n },\n {\n name: 'Bolivia (Plurinational State of)',\n capital: 'Sucre',\n languages: ['Spanish', 'Aymara', 'Quechua'],\n population: 10985059,\n flag: 'https://restcountries.eu/data/bol.svg',\n currency: 'Bolivian boliviano',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n capital: 'Kralendijk',\n languages: ['Dutch'],\n population: 17408,\n flag: 'https://restcountries.eu/data/bes.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Bosnia and Herzegovina',\n capital: 'Sarajevo',\n languages: ['Bosnian', 'Croatian', 'Serbian'],\n population: 3531159,\n flag: 'https://restcountries.eu/data/bih.svg',\n currency: 'Bosnia and Herzegovina convertible mark',\n },\n {\n name: 'Botswana',\n capital: 'Gaborone',\n languages: ['English', 'Tswana'],\n population: 2141206,\n flag: 'https://restcountries.eu/data/bwa.svg',\n currency: 'Botswana pula',\n },\n {\n name: 'Bouvet Island',\n capital: '',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 0,\n flag: 'https://restcountries.eu/data/bvt.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Brazil',\n capital: 'Brasília',\n languages: ['Portuguese'],\n population: 206135893,\n flag: 'https://restcountries.eu/data/bra.svg',\n currency: 'Brazilian real',\n },\n {\n name: 'British Indian Ocean Territory',\n capital: 'Diego Garcia',\n languages: ['English'],\n population: 3000,\n flag: 'https://restcountries.eu/data/iot.svg',\n currency: 'United States dollar',\n },\n {\n name: 'United States Minor Outlying Islands',\n capital: '',\n languages: ['English'],\n population: 300,\n flag: 'https://restcountries.eu/data/umi.svg',\n currency: 'United States Dollar',\n },\n {\n name: 'Virgin Islands (British)',\n capital: 'Road Town',\n languages: ['English'],\n population: 28514,\n flag: 'https://restcountries.eu/data/vgb.svg',\n currency: '[D]',\n },\n {\n name: 'Virgin Islands (U.S.)',\n capital: 'Charlotte Amalie',\n languages: ['English'],\n population: 114743,\n flag: 'https://restcountries.eu/data/vir.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Brunei Darussalam',\n capital: 'Bandar Seri Begawan',\n languages: ['Malay'],\n population: 411900,\n flag: 'https://restcountries.eu/data/brn.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Bulgaria',\n capital: 'Sofia',\n languages: ['Bulgarian'],\n population: 7153784,\n flag: 'https://restcountries.eu/data/bgr.svg',\n currency: 'Bulgarian lev',\n },\n {\n name: 'Burkina Faso',\n capital: 'Ouagadougou',\n languages: ['French', 'Fula'],\n population: 19034397,\n flag: 'https://restcountries.eu/data/bfa.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Burundi',\n capital: 'Bujumbura',\n languages: ['French', 'Kirundi'],\n population: 10114505,\n flag: 'https://restcountries.eu/data/bdi.svg',\n currency: 'Burundian franc',\n },\n {\n name: 'Cambodia',\n capital: 'Phnom Penh',\n languages: ['Khmer'],\n population: 15626444,\n flag: 'https://restcountries.eu/data/khm.svg',\n currency: 'Cambodian riel',\n },\n {\n name: 'Cameroon',\n capital: 'Yaoundé',\n languages: ['English', 'French'],\n population: 22709892,\n flag: 'https://restcountries.eu/data/cmr.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Canada',\n capital: 'Ottawa',\n languages: ['English', 'French'],\n population: 36155487,\n flag: 'https://restcountries.eu/data/can.svg',\n currency: 'Canadian dollar',\n },\n {\n name: 'Cabo Verde',\n capital: 'Praia',\n languages: ['Portuguese'],\n population: 531239,\n flag: 'https://restcountries.eu/data/cpv.svg',\n currency: 'Cape Verdean escudo',\n },\n {\n name: 'Cayman Islands',\n capital: 'George Town',\n languages: ['English'],\n population: 58238,\n flag: 'https://restcountries.eu/data/cym.svg',\n currency: 'Cayman Islands dollar',\n },\n {\n name: 'Central African Republic',\n capital: 'Bangui',\n languages: ['French', 'Sango'],\n population: 4998000,\n flag: 'https://restcountries.eu/data/caf.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chad',\n capital: \"N'Djamena\",\n languages: ['French', 'Arabic'],\n population: 14497000,\n flag: 'https://restcountries.eu/data/tcd.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Chile',\n capital: 'Santiago',\n languages: ['Spanish'],\n population: 18191900,\n flag: 'https://restcountries.eu/data/chl.svg',\n currency: 'Chilean peso',\n },\n {\n name: 'China',\n capital: 'Beijing',\n languages: ['Chinese'],\n population: 1377422166,\n flag: 'https://restcountries.eu/data/chn.svg',\n currency: 'Chinese yuan',\n },\n {\n name: 'Christmas Island',\n capital: 'Flying Fish Cove',\n languages: ['English'],\n population: 2072,\n flag: 'https://restcountries.eu/data/cxr.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Cocos (Keeling) Islands',\n capital: 'West Island',\n languages: ['English'],\n population: 550,\n flag: 'https://restcountries.eu/data/cck.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Colombia',\n capital: 'Bogotá',\n languages: ['Spanish'],\n population: 48759958,\n flag: 'https://restcountries.eu/data/col.svg',\n currency: 'Colombian peso',\n },\n {\n name: 'Comoros',\n capital: 'Moroni',\n languages: ['Arabic', 'French'],\n population: 806153,\n flag: 'https://restcountries.eu/data/com.svg',\n currency: 'Comorian franc',\n },\n {\n name: 'Congo',\n capital: 'Brazzaville',\n languages: ['French', 'Lingala'],\n population: 4741000,\n flag: 'https://restcountries.eu/data/cog.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Congo (Democratic Republic of the)',\n capital: 'Kinshasa',\n languages: ['French', 'Lingala', 'Kongo', 'Swahili', 'Luba-Katanga'],\n population: 85026000,\n flag: 'https://restcountries.eu/data/cod.svg',\n currency: 'Congolese franc',\n },\n {\n name: 'Cook Islands',\n capital: 'Avarua',\n languages: ['English'],\n population: 18100,\n flag: 'https://restcountries.eu/data/cok.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Costa Rica',\n capital: 'San José',\n languages: ['Spanish'],\n population: 4890379,\n flag: 'https://restcountries.eu/data/cri.svg',\n currency: 'Costa Rican colón',\n },\n {\n name: 'Croatia',\n capital: 'Zagreb',\n languages: ['Croatian'],\n population: 4190669,\n flag: 'https://restcountries.eu/data/hrv.svg',\n currency: 'Croatian kuna',\n },\n {\n name: 'Cuba',\n capital: 'Havana',\n languages: ['Spanish'],\n population: 11239004,\n flag: 'https://restcountries.eu/data/cub.svg',\n currency: 'Cuban convertible peso',\n },\n {\n name: 'Curaçao',\n capital: 'Willemstad',\n languages: ['Dutch', '(Eastern) Punjabi', 'English'],\n population: 154843,\n flag: 'https://restcountries.eu/data/cuw.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Cyprus',\n capital: 'Nicosia',\n languages: ['Greek (modern)', 'Turkish', 'Armenian'],\n population: 847000,\n flag: 'https://restcountries.eu/data/cyp.svg',\n currency: 'Euro',\n },\n {\n name: 'Czech Republic',\n capital: 'Prague',\n languages: ['Czech', 'Slovak'],\n population: 10558524,\n flag: 'https://restcountries.eu/data/cze.svg',\n currency: 'Czech koruna',\n },\n {\n name: 'Denmark',\n capital: 'Copenhagen',\n languages: ['Danish'],\n population: 5717014,\n flag: 'https://restcountries.eu/data/dnk.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Djibouti',\n capital: 'Djibouti',\n languages: ['French', 'Arabic'],\n population: 900000,\n flag: 'https://restcountries.eu/data/dji.svg',\n currency: 'Djiboutian franc',\n },\n {\n name: 'Dominica',\n capital: 'Roseau',\n languages: ['English'],\n population: 71293,\n flag: 'https://restcountries.eu/data/dma.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Dominican Republic',\n capital: 'Santo Domingo',\n languages: ['Spanish'],\n population: 10075045,\n flag: 'https://restcountries.eu/data/dom.svg',\n currency: 'Dominican peso',\n },\n {\n name: 'Ecuador',\n capital: 'Quito',\n languages: ['Spanish'],\n population: 16545799,\n flag: 'https://restcountries.eu/data/ecu.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Egypt',\n capital: 'Cairo',\n languages: ['Arabic'],\n population: 91290000,\n flag: 'https://restcountries.eu/data/egy.svg',\n currency: 'Egyptian pound',\n },\n {\n name: 'El Salvador',\n capital: 'San Salvador',\n languages: ['Spanish'],\n population: 6520675,\n flag: 'https://restcountries.eu/data/slv.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Equatorial Guinea',\n capital: 'Malabo',\n languages: ['Spanish', 'French'],\n population: 1222442,\n flag: 'https://restcountries.eu/data/gnq.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Eritrea',\n capital: 'Asmara',\n languages: ['Tigrinya', 'Arabic', 'English'],\n population: 5352000,\n flag: 'https://restcountries.eu/data/eri.svg',\n currency: 'Eritrean nakfa',\n },\n {\n name: 'Estonia',\n capital: 'Tallinn',\n languages: ['Estonian'],\n population: 1315944,\n flag: 'https://restcountries.eu/data/est.svg',\n currency: 'Euro',\n },\n {\n name: 'Ethiopia',\n capital: 'Addis Ababa',\n languages: ['Amharic'],\n population: 92206005,\n flag: 'https://restcountries.eu/data/eth.svg',\n currency: 'Ethiopian birr',\n },\n {\n name: 'Falkland Islands (Malvinas)',\n capital: 'Stanley',\n languages: ['English'],\n population: 2563,\n flag: 'https://restcountries.eu/data/flk.svg',\n currency: 'Falkland Islands pound',\n },\n {\n name: 'Faroe Islands',\n capital: 'Tórshavn',\n languages: ['Faroese'],\n population: 49376,\n flag: 'https://restcountries.eu/data/fro.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Fiji',\n capital: 'Suva',\n languages: ['English', 'Fijian', 'Hindi', 'Urdu'],\n population: 867000,\n flag: 'https://restcountries.eu/data/fji.svg',\n currency: 'Fijian dollar',\n },\n {\n name: 'Finland',\n capital: 'Helsinki',\n languages: ['Finnish', 'Swedish'],\n population: 5491817,\n flag: 'https://restcountries.eu/data/fin.svg',\n currency: 'Euro',\n },\n {\n name: 'France',\n capital: 'Paris',\n languages: ['French'],\n population: 66710000,\n flag: 'https://restcountries.eu/data/fra.svg',\n currency: 'Euro',\n },\n {\n name: 'French Guiana',\n capital: 'Cayenne',\n languages: ['French'],\n population: 254541,\n flag: 'https://restcountries.eu/data/guf.svg',\n currency: 'Euro',\n },\n {\n name: 'French Polynesia',\n capital: 'Papeetē',\n languages: ['French'],\n population: 271800,\n flag: 'https://restcountries.eu/data/pyf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'French Southern Territories',\n capital: 'Port-aux-Français',\n languages: ['French'],\n population: 140,\n flag: 'https://restcountries.eu/data/atf.svg',\n currency: 'Euro',\n },\n {\n name: 'Gabon',\n capital: 'Libreville',\n languages: ['French'],\n population: 1802278,\n flag: 'https://restcountries.eu/data/gab.svg',\n currency: 'Central African CFA franc',\n },\n {\n name: 'Gambia',\n capital: 'Banjul',\n languages: ['English'],\n population: 1882450,\n flag: 'https://restcountries.eu/data/gmb.svg',\n currency: 'Gambian dalasi',\n },\n {\n name: 'Georgia',\n capital: 'Tbilisi',\n languages: ['Georgian'],\n population: 3720400,\n flag: 'https://restcountries.eu/data/geo.svg',\n currency: 'Georgian Lari',\n },\n {\n name: 'Germany',\n capital: 'Berlin',\n languages: ['German'],\n population: 81770900,\n flag: 'https://restcountries.eu/data/deu.svg',\n currency: 'Euro',\n },\n {\n name: 'Ghana',\n capital: 'Accra',\n languages: ['English'],\n population: 27670174,\n flag: 'https://restcountries.eu/data/gha.svg',\n currency: 'Ghanaian cedi',\n },\n {\n name: 'Gibraltar',\n capital: 'Gibraltar',\n languages: ['English'],\n population: 33140,\n flag: 'https://restcountries.eu/data/gib.svg',\n currency: 'Gibraltar pound',\n },\n {\n name: 'Greece',\n capital: 'Athens',\n languages: ['Greek (modern)'],\n population: 10858018,\n flag: 'https://restcountries.eu/data/grc.svg',\n currency: 'Euro',\n },\n {\n name: 'Greenland',\n capital: 'Nuuk',\n languages: ['Kalaallisut'],\n population: 55847,\n flag: 'https://restcountries.eu/data/grl.svg',\n currency: 'Danish krone',\n },\n {\n name: 'Grenada',\n capital: \"St. George's\",\n languages: ['English'],\n population: 103328,\n flag: 'https://restcountries.eu/data/grd.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Guadeloupe',\n capital: 'Basse-Terre',\n languages: ['French'],\n population: 400132,\n flag: 'https://restcountries.eu/data/glp.svg',\n currency: 'Euro',\n },\n {\n name: 'Guam',\n capital: 'Hagåtña',\n languages: ['English', 'Chamorro', 'Spanish'],\n population: 184200,\n flag: 'https://restcountries.eu/data/gum.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Guatemala',\n capital: 'Guatemala City',\n languages: ['Spanish'],\n population: 16176133,\n flag: 'https://restcountries.eu/data/gtm.svg',\n currency: 'Guatemalan quetzal',\n },\n {\n name: 'Guernsey',\n capital: 'St. Peter Port',\n languages: ['English', 'French'],\n population: 62999,\n flag: 'https://restcountries.eu/data/ggy.svg',\n currency: 'British pound',\n },\n {\n name: 'Guinea',\n capital: 'Conakry',\n languages: ['French', 'Fula'],\n population: 12947000,\n flag: 'https://restcountries.eu/data/gin.svg',\n currency: 'Guinean franc',\n },\n {\n name: 'Guinea-Bissau',\n capital: 'Bissau',\n languages: ['Portuguese'],\n population: 1547777,\n flag: 'https://restcountries.eu/data/gnb.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Guyana',\n capital: 'Georgetown',\n languages: ['English'],\n population: 746900,\n flag: 'https://restcountries.eu/data/guy.svg',\n currency: 'Guyanese dollar',\n },\n {\n name: 'Haiti',\n capital: 'Port-au-Prince',\n languages: ['French', 'Haitian'],\n population: 11078033,\n flag: 'https://restcountries.eu/data/hti.svg',\n currency: 'Haitian gourde',\n },\n {\n name: 'Heard Island and McDonald Islands',\n capital: '',\n languages: ['English'],\n population: 0,\n flag: 'https://restcountries.eu/data/hmd.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Holy See',\n capital: 'Rome',\n languages: ['Latin', 'Italian', 'French', 'German'],\n population: 451,\n flag: 'https://restcountries.eu/data/vat.svg',\n currency: 'Euro',\n },\n {\n name: 'Honduras',\n capital: 'Tegucigalpa',\n languages: ['Spanish'],\n population: 8576532,\n flag: 'https://restcountries.eu/data/hnd.svg',\n currency: 'Honduran lempira',\n },\n {\n name: 'Hong Kong',\n capital: 'City of Victoria',\n languages: ['English', 'Chinese'],\n population: 7324300,\n flag: 'https://restcountries.eu/data/hkg.svg',\n currency: 'Hong Kong dollar',\n },\n {\n name: 'Hungary',\n capital: 'Budapest',\n languages: ['Hungarian'],\n population: 9823000,\n flag: 'https://restcountries.eu/data/hun.svg',\n currency: 'Hungarian forint',\n },\n {\n name: 'Iceland',\n capital: 'Reykjavík',\n languages: ['Icelandic'],\n population: 334300,\n flag: 'https://restcountries.eu/data/isl.svg',\n currency: 'Icelandic króna',\n },\n {\n name: 'India',\n capital: 'New Delhi',\n languages: ['Hindi', 'English'],\n population: 1295210000,\n flag: 'https://restcountries.eu/data/ind.svg',\n currency: 'Indian rupee',\n },\n {\n name: 'Indonesia',\n capital: 'Jakarta',\n languages: ['Indonesian'],\n population: 258705000,\n flag: 'https://restcountries.eu/data/idn.svg',\n currency: 'Indonesian rupiah',\n },\n {\n name: \"Côte d'Ivoire\",\n capital: 'Yamoussoukro',\n languages: ['French'],\n population: 22671331,\n flag: 'https://restcountries.eu/data/civ.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Iran (Islamic Republic of)',\n capital: 'Tehran',\n languages: ['Persian (Farsi)'],\n population: 79369900,\n flag: 'https://restcountries.eu/data/irn.svg',\n currency: 'Iranian rial',\n },\n {\n name: 'Iraq',\n capital: 'Baghdad',\n languages: ['Arabic', 'Kurdish'],\n population: 37883543,\n flag: 'https://restcountries.eu/data/irq.svg',\n currency: 'Iraqi dinar',\n },\n {\n name: 'Ireland',\n capital: 'Dublin',\n languages: ['Irish', 'English'],\n population: 6378000,\n flag: 'https://restcountries.eu/data/irl.svg',\n currency: 'Euro',\n },\n {\n name: 'Isle of Man',\n capital: 'Douglas',\n languages: ['English', 'Manx'],\n population: 84497,\n flag: 'https://restcountries.eu/data/imn.svg',\n currency: 'British pound',\n },\n {\n name: 'Israel',\n capital: 'Jerusalem',\n languages: ['Hebrew (modern)', 'Arabic'],\n population: 8527400,\n flag: 'https://restcountries.eu/data/isr.svg',\n currency: 'Israeli new shekel',\n },\n {\n name: 'Italy',\n capital: 'Rome',\n languages: ['Italian'],\n population: 60665551,\n flag: 'https://restcountries.eu/data/ita.svg',\n currency: 'Euro',\n },\n {\n name: 'Jamaica',\n capital: 'Kingston',\n languages: ['English'],\n population: 2723246,\n flag: 'https://restcountries.eu/data/jam.svg',\n currency: 'Jamaican dollar',\n },\n {\n name: 'Japan',\n capital: 'Tokyo',\n languages: ['Japanese'],\n population: 126960000,\n flag: 'https://restcountries.eu/data/jpn.svg',\n currency: 'Japanese yen',\n },\n {\n name: 'Jersey',\n capital: 'Saint Helier',\n languages: ['English', 'French'],\n population: 100800,\n flag: 'https://restcountries.eu/data/jey.svg',\n currency: 'British pound',\n },\n {\n name: 'Jordan',\n capital: 'Amman',\n languages: ['Arabic'],\n population: 9531712,\n flag: 'https://restcountries.eu/data/jor.svg',\n currency: 'Jordanian dinar',\n },\n {\n name: 'Kazakhstan',\n capital: 'Astana',\n languages: ['Kazakh', 'Russian'],\n population: 17753200,\n flag: 'https://restcountries.eu/data/kaz.svg',\n currency: 'Kazakhstani tenge',\n },\n {\n name: 'Kenya',\n capital: 'Nairobi',\n languages: ['English', 'Swahili'],\n population: 47251000,\n flag: 'https://restcountries.eu/data/ken.svg',\n currency: 'Kenyan shilling',\n },\n {\n name: 'Kiribati',\n capital: 'South Tarawa',\n languages: ['English'],\n population: 113400,\n flag: 'https://restcountries.eu/data/kir.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Kuwait',\n capital: 'Kuwait City',\n languages: ['Arabic'],\n population: 4183658,\n flag: 'https://restcountries.eu/data/kwt.svg',\n currency: 'Kuwaiti dinar',\n },\n {\n name: 'Kyrgyzstan',\n capital: 'Bishkek',\n languages: ['Kyrgyz', 'Russian'],\n population: 6047800,\n flag: 'https://restcountries.eu/data/kgz.svg',\n currency: 'Kyrgyzstani som',\n },\n {\n name: \"Lao People's Democratic Republic\",\n capital: 'Vientiane',\n languages: ['Lao'],\n population: 6492400,\n flag: 'https://restcountries.eu/data/lao.svg',\n currency: 'Lao kip',\n },\n {\n name: 'Latvia',\n capital: 'Riga',\n languages: ['Latvian'],\n population: 1961600,\n flag: 'https://restcountries.eu/data/lva.svg',\n currency: 'Euro',\n },\n {\n name: 'Lebanon',\n capital: 'Beirut',\n languages: ['Arabic', 'French'],\n population: 5988000,\n flag: 'https://restcountries.eu/data/lbn.svg',\n currency: 'Lebanese pound',\n },\n {\n name: 'Lesotho',\n capital: 'Maseru',\n languages: ['English', 'Southern Sotho'],\n population: 1894194,\n flag: 'https://restcountries.eu/data/lso.svg',\n currency: 'Lesotho loti',\n },\n {\n name: 'Liberia',\n capital: 'Monrovia',\n languages: ['English'],\n population: 4615000,\n flag: 'https://restcountries.eu/data/lbr.svg',\n currency: 'Liberian dollar',\n },\n {\n name: 'Libya',\n capital: 'Tripoli',\n languages: ['Arabic'],\n population: 6385000,\n flag: 'https://restcountries.eu/data/lby.svg',\n currency: 'Libyan dinar',\n },\n {\n name: 'Liechtenstein',\n capital: 'Vaduz',\n languages: ['German'],\n population: 37623,\n flag: 'https://restcountries.eu/data/lie.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Lithuania',\n capital: 'Vilnius',\n languages: ['Lithuanian'],\n population: 2872294,\n flag: 'https://restcountries.eu/data/ltu.svg',\n currency: 'Euro',\n },\n {\n name: 'Luxembourg',\n capital: 'Luxembourg',\n languages: ['French', 'German', 'Luxembourgish'],\n population: 576200,\n flag: 'https://restcountries.eu/data/lux.svg',\n currency: 'Euro',\n },\n {\n name: 'Macao',\n capital: '',\n languages: ['Chinese', 'Portuguese'],\n population: 649100,\n flag: 'https://restcountries.eu/data/mac.svg',\n currency: 'Macanese pataca',\n },\n {\n name: 'Macedonia (the former Yugoslav Republic of)',\n capital: 'Skopje',\n languages: ['Macedonian'],\n population: 2058539,\n flag: 'https://restcountries.eu/data/mkd.svg',\n currency: 'Macedonian denar',\n },\n {\n name: 'Madagascar',\n capital: 'Antananarivo',\n languages: ['French', 'Malagasy'],\n population: 22434363,\n flag: 'https://restcountries.eu/data/mdg.svg',\n currency: 'Malagasy ariary',\n },\n {\n name: 'Malawi',\n capital: 'Lilongwe',\n languages: ['English', 'Chichewa'],\n population: 16832910,\n flag: 'https://restcountries.eu/data/mwi.svg',\n currency: 'Malawian kwacha',\n },\n {\n name: 'Malaysia',\n capital: 'Kuala Lumpur',\n languages: ['Malaysian'],\n population: 31405416,\n flag: 'https://restcountries.eu/data/mys.svg',\n currency: 'Malaysian ringgit',\n },\n {\n name: 'Maldives',\n capital: 'Malé',\n languages: ['Divehi'],\n population: 344023,\n flag: 'https://restcountries.eu/data/mdv.svg',\n currency: 'Maldivian rufiyaa',\n },\n {\n name: 'Mali',\n capital: 'Bamako',\n languages: ['French'],\n population: 18135000,\n flag: 'https://restcountries.eu/data/mli.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Malta',\n capital: 'Valletta',\n languages: ['Maltese', 'English'],\n population: 425384,\n flag: 'https://restcountries.eu/data/mlt.svg',\n currency: 'Euro',\n },\n {\n name: 'Marshall Islands',\n capital: 'Majuro',\n languages: ['English', 'Marshallese'],\n population: 54880,\n flag: 'https://restcountries.eu/data/mhl.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Martinique',\n capital: 'Fort-de-France',\n languages: ['French'],\n population: 378243,\n flag: 'https://restcountries.eu/data/mtq.svg',\n currency: 'Euro',\n },\n {\n name: 'Mauritania',\n capital: 'Nouakchott',\n languages: ['Arabic'],\n population: 3718678,\n flag: 'https://restcountries.eu/data/mrt.svg',\n currency: 'Mauritanian ouguiya',\n },\n {\n name: 'Mauritius',\n capital: 'Port Louis',\n languages: ['English'],\n population: 1262879,\n flag: 'https://restcountries.eu/data/mus.svg',\n currency: 'Mauritian rupee',\n },\n {\n name: 'Mayotte',\n capital: 'Mamoudzou',\n languages: ['French'],\n population: 226915,\n flag: 'https://restcountries.eu/data/myt.svg',\n currency: 'Euro',\n },\n {\n name: 'Mexico',\n capital: 'Mexico City',\n languages: ['Spanish'],\n population: 122273473,\n flag: 'https://restcountries.eu/data/mex.svg',\n currency: 'Mexican peso',\n },\n {\n name: 'Micronesia (Federated States of)',\n capital: 'Palikir',\n languages: ['English'],\n population: 102800,\n flag: 'https://restcountries.eu/data/fsm.svg',\n currency: '[D]',\n },\n {\n name: 'Moldova (Republic of)',\n capital: 'Chișinău',\n languages: ['Romanian'],\n population: 3553100,\n flag: 'https://restcountries.eu/data/mda.svg',\n currency: 'Moldovan leu',\n },\n {\n name: 'Monaco',\n capital: 'Monaco',\n languages: ['French'],\n population: 38400,\n flag: 'https://restcountries.eu/data/mco.svg',\n currency: 'Euro',\n },\n {\n name: 'Mongolia',\n capital: 'Ulan Bator',\n languages: ['Mongolian'],\n population: 3093100,\n flag: 'https://restcountries.eu/data/mng.svg',\n currency: 'Mongolian tögrög',\n },\n {\n name: 'Montenegro',\n capital: 'Podgorica',\n languages: ['Serbian', 'Bosnian', 'Albanian', 'Croatian'],\n population: 621810,\n flag: 'https://restcountries.eu/data/mne.svg',\n currency: 'Euro',\n },\n {\n name: 'Montserrat',\n capital: 'Plymouth',\n languages: ['English'],\n population: 4922,\n flag: 'https://restcountries.eu/data/msr.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Morocco',\n capital: 'Rabat',\n languages: ['Arabic'],\n population: 33337529,\n flag: 'https://restcountries.eu/data/mar.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Mozambique',\n capital: 'Maputo',\n languages: ['Portuguese'],\n population: 26423700,\n flag: 'https://restcountries.eu/data/moz.svg',\n currency: 'Mozambican metical',\n },\n {\n name: 'Myanmar',\n capital: 'Naypyidaw',\n languages: ['Burmese'],\n population: 51419420,\n flag: 'https://restcountries.eu/data/mmr.svg',\n currency: 'Burmese kyat',\n },\n {\n name: 'Namibia',\n capital: 'Windhoek',\n languages: ['English', 'Afrikaans'],\n population: 2324388,\n flag: 'https://restcountries.eu/data/nam.svg',\n currency: 'Namibian dollar',\n },\n {\n name: 'Nauru',\n capital: 'Yaren',\n languages: ['English', 'Nauruan'],\n population: 10084,\n flag: 'https://restcountries.eu/data/nru.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Nepal',\n capital: 'Kathmandu',\n languages: ['Nepali'],\n population: 28431500,\n flag: 'https://restcountries.eu/data/npl.svg',\n currency: 'Nepalese rupee',\n },\n {\n name: 'Netherlands',\n capital: 'Amsterdam',\n languages: ['Dutch'],\n population: 17019800,\n flag: 'https://restcountries.eu/data/nld.svg',\n currency: 'Euro',\n },\n {\n name: 'New Caledonia',\n capital: 'Nouméa',\n languages: ['French'],\n population: 268767,\n flag: 'https://restcountries.eu/data/ncl.svg',\n currency: 'CFP franc',\n },\n {\n name: 'New Zealand',\n capital: 'Wellington',\n languages: ['English', 'Māori'],\n population: 4697854,\n flag: 'https://restcountries.eu/data/nzl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Nicaragua',\n capital: 'Managua',\n languages: ['Spanish'],\n population: 6262703,\n flag: 'https://restcountries.eu/data/nic.svg',\n currency: 'Nicaraguan córdoba',\n },\n {\n name: 'Niger',\n capital: 'Niamey',\n languages: ['French'],\n population: 20715000,\n flag: 'https://restcountries.eu/data/ner.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Nigeria',\n capital: 'Abuja',\n languages: ['English'],\n population: 186988000,\n flag: 'https://restcountries.eu/data/nga.svg',\n currency: 'Nigerian naira',\n },\n {\n name: 'Niue',\n capital: 'Alofi',\n languages: ['English'],\n population: 1470,\n flag: 'https://restcountries.eu/data/niu.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Norfolk Island',\n capital: 'Kingston',\n languages: ['English'],\n population: 2302,\n flag: 'https://restcountries.eu/data/nfk.svg',\n currency: 'Australian dollar',\n },\n {\n name: \"Korea (Democratic People's Republic of)\",\n capital: 'Pyongyang',\n languages: ['Korean'],\n population: 25281000,\n flag: 'https://restcountries.eu/data/prk.svg',\n currency: 'North Korean won',\n },\n {\n name: 'Northern Mariana Islands',\n capital: 'Saipan',\n languages: ['English', 'Chamorro'],\n population: 56940,\n flag: 'https://restcountries.eu/data/mnp.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Norway',\n capital: 'Oslo',\n languages: ['Norwegian', 'Norwegian Bokmål', 'Norwegian Nynorsk'],\n population: 5223256,\n flag: 'https://restcountries.eu/data/nor.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Oman',\n capital: 'Muscat',\n languages: ['Arabic'],\n population: 4420133,\n flag: 'https://restcountries.eu/data/omn.svg',\n currency: 'Omani rial',\n },\n {\n name: 'Pakistan',\n capital: 'Islamabad',\n languages: ['English', 'Urdu'],\n population: 194125062,\n flag: 'https://restcountries.eu/data/pak.svg',\n currency: 'Pakistani rupee',\n },\n {\n name: 'Palau',\n capital: 'Ngerulmud',\n languages: ['English'],\n population: 17950,\n flag: 'https://restcountries.eu/data/plw.svg',\n currency: '[E]',\n },\n {\n name: 'Palestine, State of',\n capital: 'Ramallah',\n languages: ['Arabic'],\n population: 4682467,\n flag: 'https://restcountries.eu/data/pse.svg',\n currency: 'Israeli new sheqel',\n },\n {\n name: 'Panama',\n capital: 'Panama City',\n languages: ['Spanish'],\n population: 3814672,\n flag: 'https://restcountries.eu/data/pan.svg',\n currency: 'Panamanian balboa',\n },\n {\n name: 'Papua New Guinea',\n capital: 'Port Moresby',\n languages: ['English'],\n population: 8083700,\n flag: 'https://restcountries.eu/data/png.svg',\n currency: 'Papua New Guinean kina',\n },\n {\n name: 'Paraguay',\n capital: 'Asunción',\n languages: ['Spanish', 'Guaraní'],\n population: 6854536,\n flag: 'https://restcountries.eu/data/pry.svg',\n currency: 'Paraguayan guaraní',\n },\n {\n name: 'Peru',\n capital: 'Lima',\n languages: ['Spanish'],\n population: 31488700,\n flag: 'https://restcountries.eu/data/per.svg',\n currency: 'Peruvian sol',\n },\n {\n name: 'Philippines',\n capital: 'Manila',\n languages: ['English'],\n population: 103279800,\n flag: 'https://restcountries.eu/data/phl.svg',\n currency: 'Philippine peso',\n },\n {\n name: 'Pitcairn',\n capital: 'Adamstown',\n languages: ['English'],\n population: 56,\n flag: 'https://restcountries.eu/data/pcn.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Poland',\n capital: 'Warsaw',\n languages: ['Polish'],\n population: 38437239,\n flag: 'https://restcountries.eu/data/pol.svg',\n currency: 'Polish złoty',\n },\n {\n name: 'Portugal',\n capital: 'Lisbon',\n languages: ['Portuguese'],\n population: 10374822,\n flag: 'https://restcountries.eu/data/prt.svg',\n currency: 'Euro',\n },\n {\n name: 'Puerto Rico',\n capital: 'San Juan',\n languages: ['Spanish', 'English'],\n population: 3474182,\n flag: 'https://restcountries.eu/data/pri.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Qatar',\n capital: 'Doha',\n languages: ['Arabic'],\n population: 2587564,\n flag: 'https://restcountries.eu/data/qat.svg',\n currency: 'Qatari riyal',\n },\n {\n name: 'Republic of Kosovo',\n capital: 'Pristina',\n languages: ['Albanian', 'Serbian'],\n population: 1733842,\n flag: 'https://restcountries.eu/data/kos.svg',\n currency: 'Euro',\n },\n {\n name: 'Réunion',\n capital: 'Saint-Denis',\n languages: ['French'],\n population: 840974,\n flag: 'https://restcountries.eu/data/reu.svg',\n currency: 'Euro',\n },\n {\n name: 'Romania',\n capital: 'Bucharest',\n languages: ['Romanian'],\n population: 19861408,\n flag: 'https://restcountries.eu/data/rou.svg',\n currency: 'Romanian leu',\n },\n {\n name: 'Russian Federation',\n capital: 'Moscow',\n languages: ['Russian'],\n population: 146599183,\n flag: 'https://restcountries.eu/data/rus.svg',\n currency: 'Russian ruble',\n },\n {\n name: 'Rwanda',\n capital: 'Kigali',\n languages: ['Kinyarwanda', 'English', 'French'],\n population: 11553188,\n flag: 'https://restcountries.eu/data/rwa.svg',\n currency: 'Rwandan franc',\n },\n {\n name: 'Saint Barthélemy',\n capital: 'Gustavia',\n languages: ['French'],\n population: 9417,\n flag: 'https://restcountries.eu/data/blm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n capital: 'Jamestown',\n languages: ['English'],\n population: 4255,\n flag: 'https://restcountries.eu/data/shn.svg',\n currency: 'Saint Helena pound',\n },\n {\n name: 'Saint Kitts and Nevis',\n capital: 'Basseterre',\n languages: ['English'],\n population: 46204,\n flag: 'https://restcountries.eu/data/kna.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Lucia',\n capital: 'Castries',\n languages: ['English'],\n population: 186000,\n flag: 'https://restcountries.eu/data/lca.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Saint Martin (French part)',\n capital: 'Marigot',\n languages: ['English', 'French', 'Dutch'],\n population: 36979,\n flag: 'https://restcountries.eu/data/maf.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Pierre and Miquelon',\n capital: 'Saint-Pierre',\n languages: ['French'],\n population: 6069,\n flag: 'https://restcountries.eu/data/spm.svg',\n currency: 'Euro',\n },\n {\n name: 'Saint Vincent and the Grenadines',\n capital: 'Kingstown',\n languages: ['English'],\n population: 109991,\n flag: 'https://restcountries.eu/data/vct.svg',\n currency: 'East Caribbean dollar',\n },\n {\n name: 'Samoa',\n capital: 'Apia',\n languages: ['Samoan', 'English'],\n population: 194899,\n flag: 'https://restcountries.eu/data/wsm.svg',\n currency: 'Samoan tālā',\n },\n {\n name: 'San Marino',\n capital: 'City of San Marino',\n languages: ['Italian'],\n population: 33005,\n flag: 'https://restcountries.eu/data/smr.svg',\n currency: 'Euro',\n },\n {\n name: 'Sao Tome and Principe',\n capital: 'São Tomé',\n languages: ['Portuguese'],\n population: 187356,\n flag: 'https://restcountries.eu/data/stp.svg',\n currency: 'São Tomé and Príncipe dobra',\n },\n {\n name: 'Saudi Arabia',\n capital: 'Riyadh',\n languages: ['Arabic'],\n population: 32248200,\n flag: 'https://restcountries.eu/data/sau.svg',\n currency: 'Saudi riyal',\n },\n {\n name: 'Senegal',\n capital: 'Dakar',\n languages: ['French'],\n population: 14799859,\n flag: 'https://restcountries.eu/data/sen.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Serbia',\n capital: 'Belgrade',\n languages: ['Serbian'],\n population: 7076372,\n flag: 'https://restcountries.eu/data/srb.svg',\n currency: 'Serbian dinar',\n },\n {\n name: 'Seychelles',\n capital: 'Victoria',\n languages: ['French', 'English'],\n population: 91400,\n flag: 'https://restcountries.eu/data/syc.svg',\n currency: 'Seychellois rupee',\n },\n {\n name: 'Sierra Leone',\n capital: 'Freetown',\n languages: ['English'],\n population: 7075641,\n flag: 'https://restcountries.eu/data/sle.svg',\n currency: 'Sierra Leonean leone',\n },\n {\n name: 'Singapore',\n capital: 'Singapore',\n languages: ['English', 'Malay', 'Tamil', 'Chinese'],\n population: 5535000,\n flag: 'https://restcountries.eu/data/sgp.svg',\n currency: 'Brunei dollar',\n },\n {\n name: 'Sint Maarten (Dutch part)',\n capital: 'Philipsburg',\n languages: ['Dutch', 'English'],\n population: 38247,\n flag: 'https://restcountries.eu/data/sxm.svg',\n currency: 'Netherlands Antillean guilder',\n },\n {\n name: 'Slovakia',\n capital: 'Bratislava',\n languages: ['Slovak'],\n population: 5426252,\n flag: 'https://restcountries.eu/data/svk.svg',\n currency: 'Euro',\n },\n {\n name: 'Slovenia',\n capital: 'Ljubljana',\n languages: ['Slovene'],\n population: 2064188,\n flag: 'https://restcountries.eu/data/svn.svg',\n currency: 'Euro',\n },\n {\n name: 'Solomon Islands',\n capital: 'Honiara',\n languages: ['English'],\n population: 642000,\n flag: 'https://restcountries.eu/data/slb.svg',\n currency: 'Solomon Islands dollar',\n },\n {\n name: 'Somalia',\n capital: 'Mogadishu',\n languages: ['Somali', 'Arabic'],\n population: 11079000,\n flag: 'https://restcountries.eu/data/som.svg',\n currency: 'Somali shilling',\n },\n {\n name: 'South Africa',\n capital: 'Pretoria',\n languages: [\n 'Afrikaans',\n 'English',\n 'Southern Ndebele',\n 'Southern Sotho',\n 'Swati',\n 'Tswana',\n 'Tsonga',\n 'Venda',\n 'Xhosa',\n 'Zulu',\n ],\n population: 55653654,\n flag: 'https://restcountries.eu/data/zaf.svg',\n currency: 'South African rand',\n },\n {\n name: 'South Georgia and the South Sandwich Islands',\n capital: 'King Edward Point',\n languages: ['English'],\n population: 30,\n flag: 'https://restcountries.eu/data/sgs.svg',\n currency: 'British pound',\n },\n {\n name: 'Korea (Republic of)',\n capital: 'Seoul',\n languages: ['Korean'],\n population: 50801405,\n flag: 'https://restcountries.eu/data/kor.svg',\n currency: 'South Korean won',\n },\n {\n name: 'South Sudan',\n capital: 'Juba',\n languages: ['English'],\n population: 12131000,\n flag: 'https://restcountries.eu/data/ssd.svg',\n currency: 'South Sudanese pound',\n },\n {\n name: 'Spain',\n capital: 'Madrid',\n languages: ['Spanish'],\n population: 46438422,\n flag: 'https://restcountries.eu/data/esp.svg',\n currency: 'Euro',\n },\n {\n name: 'Sri Lanka',\n capital: 'Colombo',\n languages: ['Sinhalese', 'Tamil'],\n population: 20966000,\n flag: 'https://restcountries.eu/data/lka.svg',\n currency: 'Sri Lankan rupee',\n },\n {\n name: 'Sudan',\n capital: 'Khartoum',\n languages: ['Arabic', 'English'],\n population: 39598700,\n flag: 'https://restcountries.eu/data/sdn.svg',\n currency: 'Sudanese pound',\n },\n {\n name: 'Suriname',\n capital: 'Paramaribo',\n languages: ['Dutch'],\n population: 541638,\n flag: 'https://restcountries.eu/data/sur.svg',\n currency: 'Surinamese dollar',\n },\n {\n name: 'Svalbard and Jan Mayen',\n capital: 'Longyearbyen',\n languages: ['Norwegian'],\n population: 2562,\n flag: 'https://restcountries.eu/data/sjm.svg',\n currency: 'Norwegian krone',\n },\n {\n name: 'Swaziland',\n capital: 'Lobamba',\n languages: ['English', 'Swati'],\n population: 1132657,\n flag: 'https://restcountries.eu/data/swz.svg',\n currency: 'Swazi lilangeni',\n },\n {\n name: 'Sweden',\n capital: 'Stockholm',\n languages: ['Swedish'],\n population: 9894888,\n flag: 'https://restcountries.eu/data/swe.svg',\n currency: 'Swedish krona',\n },\n {\n name: 'Switzerland',\n capital: 'Bern',\n languages: ['German', 'French', 'Italian'],\n population: 8341600,\n flag: 'https://restcountries.eu/data/che.svg',\n currency: 'Swiss franc',\n },\n {\n name: 'Syrian Arab Republic',\n capital: 'Damascus',\n languages: ['Arabic'],\n population: 18564000,\n flag: 'https://restcountries.eu/data/syr.svg',\n currency: 'Syrian pound',\n },\n {\n name: 'Taiwan',\n capital: 'Taipei',\n languages: ['Chinese'],\n population: 23503349,\n flag: 'https://restcountries.eu/data/twn.svg',\n currency: 'New Taiwan dollar',\n },\n {\n name: 'Tajikistan',\n capital: 'Dushanbe',\n languages: ['Tajik', 'Russian'],\n population: 8593600,\n flag: 'https://restcountries.eu/data/tjk.svg',\n currency: 'Tajikistani somoni',\n },\n {\n name: 'Tanzania, United Republic of',\n capital: 'Dodoma',\n languages: ['Swahili', 'English'],\n population: 55155000,\n flag: 'https://restcountries.eu/data/tza.svg',\n currency: 'Tanzanian shilling',\n },\n {\n name: 'Thailand',\n capital: 'Bangkok',\n languages: ['Thai'],\n population: 65327652,\n flag: 'https://restcountries.eu/data/tha.svg',\n currency: 'Thai baht',\n },\n {\n name: 'Timor-Leste',\n capital: 'Dili',\n languages: ['Portuguese'],\n population: 1167242,\n flag: 'https://restcountries.eu/data/tls.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Togo',\n capital: 'Lomé',\n languages: ['French'],\n population: 7143000,\n flag: 'https://restcountries.eu/data/tgo.svg',\n currency: 'West African CFA franc',\n },\n {\n name: 'Tokelau',\n capital: 'Fakaofo',\n languages: ['English'],\n population: 1411,\n flag: 'https://restcountries.eu/data/tkl.svg',\n currency: 'New Zealand dollar',\n },\n {\n name: 'Tonga',\n capital: \"Nuku'alofa\",\n languages: ['English', 'Tonga (Tonga Islands)'],\n population: 103252,\n flag: 'https://restcountries.eu/data/ton.svg',\n currency: 'Tongan paʻanga',\n },\n {\n name: 'Trinidad and Tobago',\n capital: 'Port of Spain',\n languages: ['English'],\n population: 1349667,\n flag: 'https://restcountries.eu/data/tto.svg',\n currency: 'Trinidad and Tobago dollar',\n },\n {\n name: 'Tunisia',\n capital: 'Tunis',\n languages: ['Arabic'],\n population: 11154400,\n flag: 'https://restcountries.eu/data/tun.svg',\n currency: 'Tunisian dinar',\n },\n {\n name: 'Turkey',\n capital: 'Ankara',\n languages: ['Turkish'],\n population: 78741053,\n flag: 'https://restcountries.eu/data/tur.svg',\n currency: 'Turkish lira',\n },\n {\n name: 'Turkmenistan',\n capital: 'Ashgabat',\n languages: ['Turkmen', 'Russian'],\n population: 4751120,\n flag: 'https://restcountries.eu/data/tkm.svg',\n currency: 'Turkmenistan manat',\n },\n {\n name: 'Turks and Caicos Islands',\n capital: 'Cockburn Town',\n languages: ['English'],\n population: 31458,\n flag: 'https://restcountries.eu/data/tca.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Tuvalu',\n capital: 'Funafuti',\n languages: ['English'],\n population: 10640,\n flag: 'https://restcountries.eu/data/tuv.svg',\n currency: 'Australian dollar',\n },\n {\n name: 'Uganda',\n capital: 'Kampala',\n languages: ['English', 'Swahili'],\n population: 33860700,\n flag: 'https://restcountries.eu/data/uga.svg',\n currency: 'Ugandan shilling',\n },\n {\n name: 'Ukraine',\n capital: 'Kiev',\n languages: ['Ukrainian'],\n population: 42692393,\n flag: 'https://restcountries.eu/data/ukr.svg',\n currency: 'Ukrainian hryvnia',\n },\n {\n name: 'United Arab Emirates',\n capital: 'Abu Dhabi',\n languages: ['Arabic'],\n population: 9856000,\n flag: 'https://restcountries.eu/data/are.svg',\n currency: 'United Arab Emirates dirham',\n },\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n capital: 'London',\n languages: ['English'],\n population: 65110000,\n flag: 'https://restcountries.eu/data/gbr.svg',\n currency: 'British pound',\n },\n {\n name: 'United States of America',\n capital: 'Washington, D.C.',\n languages: ['English'],\n population: 323947000,\n flag: 'https://restcountries.eu/data/usa.svg',\n currency: 'United States dollar',\n },\n {\n name: 'Uruguay',\n capital: 'Montevideo',\n languages: ['Spanish'],\n population: 3480222,\n flag: 'https://restcountries.eu/data/ury.svg',\n currency: 'Uruguayan peso',\n },\n {\n name: 'Uzbekistan',\n capital: 'Tashkent',\n languages: ['Uzbek', 'Russian'],\n population: 31576400,\n flag: 'https://restcountries.eu/data/uzb.svg',\n currency: \"Uzbekistani so'm\",\n },\n {\n name: 'Vanuatu',\n capital: 'Port Vila',\n languages: ['Bislama', 'English', 'French'],\n population: 277500,\n flag: 'https://restcountries.eu/data/vut.svg',\n currency: 'Vanuatu vatu',\n },\n {\n name: 'Venezuela (Bolivarian Republic of)',\n capital: 'Caracas',\n languages: ['Spanish'],\n population: 31028700,\n flag: 'https://restcountries.eu/data/ven.svg',\n currency: 'Venezuelan bolívar',\n },\n {\n name: 'Viet Nam',\n capital: 'Hanoi',\n languages: ['Vietnamese'],\n population: 92700000,\n flag: 'https://restcountries.eu/data/vnm.svg',\n currency: 'Vietnamese đồng',\n },\n {\n name: 'Wallis and Futuna',\n capital: 'Mata-Utu',\n languages: ['French'],\n population: 11750,\n flag: 'https://restcountries.eu/data/wlf.svg',\n currency: 'CFP franc',\n },\n {\n name: 'Western Sahara',\n capital: 'El Aaiún',\n languages: ['Spanish'],\n population: 510713,\n flag: 'https://restcountries.eu/data/esh.svg',\n currency: 'Moroccan dirham',\n },\n {\n name: 'Yemen',\n capital: \"Sana'a\",\n languages: ['Arabic'],\n population: 27478000,\n flag: 'https://restcountries.eu/data/yem.svg',\n currency: 'Yemeni rial',\n },\n {\n name: 'Zambia',\n capital: 'Lusaka',\n languages: ['English'],\n population: 15933883,\n flag: 'https://restcountries.eu/data/zmb.svg',\n currency: 'Zambian kwacha',\n },\n {\n name: 'Zimbabwe',\n capital: 'Harare',\n languages: ['English', 'Shona', 'Northern Ndebele'],\n population: 14240168,\n flag: 'https://restcountries.eu/data/zwe.svg',\n currency: 'Botswana pula',\n },\n]\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/src/data/ten_most_highest_populations.js", "content": "export const tenHighestPopulation = [\n { country: 'World', population: 7693165599 },\n { country: 'China', population: 1377422166 },\n { country: 'India', population: 1295210000 },\n { country: 'United States of America', population: 323947000 },\n { country: 'Indonesia', population: 258705000 },\n { country: 'Brazil', population: 206135893 },\n { country: 'Pakistan', population: 194125062 },\n { country: 'Nigeria', population: 186988000 },\n { country: 'Bangladesh', population: 161006790 },\n { country: 'Russian Federation', population: 146599183 },\n { country: 'Japan', population: 126960000 },\n]\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/src/index.js", "content": "import React, { useRef } from 'react'\nimport ReactDOM from 'react-dom'\n\nconst App = (props) => {\n const ref = useRef(null)\n const onClick = () => {\n ref.current.style.backgroundColor = '#61dbfb'\n ref.current.style.padding = '50px'\n ref.current.style.textAlign = 'center'\n }\n return (\n
    \n

    How to style HTML from the DOM tree using useRef

    \n \n
    \n )\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(, rootElement)\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/src/index.scss", "content": "/* == General style === */\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n line-height: 1.5;\n font-family: 'Montserrat';\n font-weight: 300;\n color: black;\n}\n\n.root {\n min-height: 100%;\n position: relative;\n}\n\n.header-wrapper,\n.main-wrapper,\n.footer-wrapper {\n width: 85%;\n margin: auto;\n}\n\n.header-wrapper,\n.main-wrapper {\n padding: 10px;\n margin: 2px auto;\n}\n\nh1 {\n font-size: 70px;\n font-weight: 300;\n}\n\nh2,\nh3 {\n font-weight: 300;\n}\n\nheader {\n background-color: #61dbfb;\n padding: 25;\n padding: 10px;\n}\n\nmain {\n padding: 10px;\n padding-bottom: 60px;\n /* Height of the footer */\n}\n\nul {\n margin-left: 15px;\n}\n\nul li {\n list-style: none;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 60px;\n /* Height of the footer */\n background: #6cf;\n}\n\n.footer-wrapper {\n font-weight: 400;\n text-align: center;\n line-height: 60px;\n}\n.user-card {\n margin-top: 10px;\n}\n.user-card > img {\n border-radius: 50%;\n width: 14%;\n}\n" }, { "path": "30_conclusions/30_conclusions_boilerplate/src/useFetch.js", "content": "import { useState, useEffect } from 'react'\n\nexport const useFetch = (url) => {\n const [data, setData] = useState([])\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url)\n const data = await response.json()\n setData(data)\n } catch (error) {\n console.log(error)\n }\n }\n fetchData()\n }, [url])\n\n return data\n}\n\nexport default useFetch\n" }, { "path": "readMe.md", "content": "
    \n\n
    \n\n
    \n\n

    30 Days Of React

    \n\n \n \n \n\n \n \"Twitter\n \n\nAuthor: Asabeneh Yetayeh
    \n October, 2020    \n\n
    \n\n[Day 1 >>](./01_Day_JavaScript_Refresher/01_javascript_refresher.md)\n\n| # Day | Topics |\n| ----- | :-------------------------------------------------------------------------------------------------------------------------: |\n| 00 | [Introduction](#introduction)
    [How to Use Repo](#how-to-use-repo)
    [Requirements](#requirements)
    [Setup](#setup) |\n| 01 | [JavaScript Refresher](./01_Day_JavaScript_Refresher/01_javascript_refresher.md) |\n| 02 | [Getting Started React](./02_Day_Introduction_to_React/02_introduction_to_react.md) |\n| 03 | [Setting Up](./03_Day_Setting_Up/03_setting_up.md) |\n| 04 | [Components](./04_Day_Components/04_components.md) |\n| 05 | [Props](./05_Day_Props/05_props.md) |\n| 06 | [List, Map and Keys](./06_Day_Map_List_Keys/06_map_list_keys.md) |\n| 07 | [Class Components](./07_Day_Class_Components/07_class_components.md) |\n| 08 | [States](./08_Day_States/08_states.md) |\n| 09 | [Conditional Rendering](./09_Day_Conditional_Rendering/09_conditional_rendering.md) |\n| 10 | [React Project Folder Structure](./10_React_Project_Folder_Structure/10_react_project_folder_structure.md) |\n| 11 | [Events](./11_Day_Events/11_events.md) |\n| 12 | [Forms](./12_Day_Forms/12_forms.md) |\n| 13 | [Controlled and Uncontrolled Component](./13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md) |\n| 14 | [Component Life Cycles](./14_Day_Component_Life_Cycles/14_component_life_cycles.md) |\n| 15 | [Third Party Packages](./15_Third_Party_Packages/15_third_party_packages.md) |\n| 16 | [Higher Order Components](./16_Higher_Order_Component/16_higher_order_component.md) |\n| 17 | [React Router](./17_React_Router/17_react_router.md) |\n| 18 | [Fetch versus Axios](./18_Fetch_And_Axios/18_fetch_axios.md) |\n| 19 | [Projects](./19_projects/19_projects.md) |\n| 20 | [Projects](./20_projects/20_projects.md) |\n| 21 | [Hooks](./21_Introducing_Hooks/21_introducing_hooks.md) |\n| 22 | [Forms Using Hook](./22_Form_Using_Hooks/22_form_using_hooks.md) |\n| 23 | [Fetching Data Using Hooks](./23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md) |\n| 24 | [Project using Hooks](./24_projects/24_projects.md) |\n| 25 | [Custom Hooks](./25_Custom_Hooks/25_custom_hooks.md) |\n| 26 | [Context](./26_Context/26_context.md) |\n| 27 | [Ref](./27_Ref/27_ref.md) |\n| 28 | [project](./28_project/28_project.md) |\n| 29 | [Explore](./29_explore/29_explore.md) |\n| 30 | [Conclusions](./30_conclusions/30_conclusions.md) |\n\n🧡🧡🧡 HAPPY CODING 🧡🧡🧡\n\n\n\n---\n
    \n

    💖 Sponsors

    \n\n

    Our amazing sponsors for supporting my open-source contribution and the 30 Days of Challenge series!

    \n\n

    Current Sponsor

    \n
    \n\n\n\n---\n\n

    🙌 Become a Sponsor

    \n\n

    You can support this project by becoming a sponsor on GitHub Sponsors or through PayPal.

    \n\n

    Every contribution, big or small, makes a huge difference. Thank you for your support! 🌟

    \n\n
    \n---\n\n- [](#)\n- [Introduction](#introduction)\n- [Requirements](#requirements)\n- [How to Use Repo](#how-to-use-repo)\n - [Star and Fork this Repo](#star-and-fork-this-repo)\n - [Clone your Fork](#clone-your-fork)\n - [Create a New Branch](#create-a-new-branch)\n - [Structure Exercise Solutions](#structure-exercise-solutions)\n - [Commit Exercise Solutions](#commit-exercise-solutions)\n - [Update your Fork Daily](#update-your-fork-daily)\n- [Setup](#setup)\n - [Install Node.js](#install-nodejs)\n - [Browser](#browser)\n - [Installing Google Chrome](#installing-google-chrome)\n - [Opening Google Chrome Console](#opening-google-chrome-console)\n - [Writing Code on Browser Console](#writing-code-on-browser-console)\n - [Console.log](#consolelog)\n - [Console.log with Multiple Arguments](#consolelog-with-multiple-arguments)\n - [Comments](#comments)\n - [Syntax](#syntax)\n - [Arithmetics](#arithmetics)\n - [Code Editor](#code-editor)\n - [Installing Visual Studio Code](#installing-visual-studio-code)\n - [How to Use Visual Studio Code](#how-to-use-visual-studio-code)\n\n---\n\n## Introduction\n\n**Congratulations** on deciding to participate in 30 days of React programming challenge. In this challenge you will learn everything you need to use to develop a React application. In the end of the challenge you will get a 30DaysOfReact programming challenge completion certificate. In order to get a certificate, you have to enroll to [DevOsome](https://www.devosome.com/) which is an interactive and engaging online educational platform.\n\nIn case you need help or if you would like to help others you may join the [telegram group](https://t.me/thirtydaysofreact).\n\n**A 30DaysOfReact** challenge is a guide for both beginners and advanced JavaScript and React developers. Welcome to 30 Days Of React. React is a JavaScript library. I enjoy using and teaching React and I hope you will do so too.\nIn this step by step 30 Days React challenge, you will learn React which is one of most popular user interface JavaScript libraries.\nReact can do everything that JavaScript can do. React can be used **_to add interactivity to websites, to develop mobile apps, desktop applications, games_**.\nI believe you will learn quite a lot in the next 30 days and your programming and problem solving skills will also be improved significantly.\n\nI will use conversational English and less jargons to write this challenge. The content will be continuously updated. If you find a typo or grammar mistakes don't be surprised because I don't do any proof read before I publish it. I would recommend you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact.\nIf you are good at arrays, loops, functions, objects, functional programming, destructuring and spreading and class then you will be able to follow the challenge properly. Otherwise, I strongly recommend you to check [30DaysOfJavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript).\n\nBefore you dive into this course, you may check the [review](https://t.me/thirtydaysofreact) of 30 Days Of React.\n\nThis challenge is easy to read, written in conversational English, engaging, motivating and at the same time, it is very demanding. You need to allocate much time to finish this challenge. If you are a visual learner, you may get the video lesson on Washera YouTube channel. Subscribe the channel, comment and ask questions on YouTube vides and be proactive, the author will eventually notice you.\n\nThe author likes to hear your opinion about the challenge, share your thoughts about the 30DaysOfJavaScript challenge. You can leave your testimonial on this [link](https://www.asabeneh.com/testimonials)\n\nLearn with Asabeneh by joining the upcoming [CODING BOOTCAMP](https://docs.google.com/forms/d/e/1FAIpQLSf0oNIYR9XU1DCctfl-pY36KbWse-SQX5aQaUgetqSinFYnmQ/viewform) \n\n## Requirements\n\nTo get along with the challenge you need to have the following:\n\n1. Motivation\n2. A computer\n3. Internet\n4. A browser\n5. A code editor\n6. HTML, CSS and JavaScript intermediate level skill\n\n## How to Use Repo\n\n### Star and Fork this Repo\n\nStar this repo to support this work and Fork the repo to create your own copy to work from.\n\n### Clone your Fork\n\nYou should always work directly from your forked copy.\n\n```bash\n# note that an `ssh` link is used here, but an `https` link will work the same\ngit clone git@github.com:username/30-Days-Of-React.git\ncd 30-Days-Of-React\n```\n\n### Create a New Branch\n\nTo complete daily exercises, my suggestion is to create a separate branch to house your exercise folder or any other changes you make. This will keep your master branch clean at all times, which means your master will always be similar to the original master.\n\n```bash\ngit checkout -b exercise-solutions # `-b` creates the branch if it does not exist\n```\n\n### Structure Exercise Solutions\n\nIn your new branch, you can use files/folders to structure your solutions to daily exercises\n\n```bash\nmkdir -p solutions/day-01 # `-p` helps create nested directories\ntouch solutions/day-01/level1.js # touch creates a file\n```\n\n### Commit Exercise Solutions\n\nCommit your solutions to your Fork\n\n```bash\ngit add solutions/day-01/level1.js\ngit commit -m \"chore: exercise level1 complete\"\ngit push origin exercise-solutions # branch `exercise-solutions` was created earlier\n```\n\n### Update your Fork Daily\n\nThis repo will be updated daily throughout the month. When a new day's content becomes available, you can update your forked copy with the steps below.\n\n```bash\n# 1. switch to master branch\ngit checkout master\n# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`\ngit remote -v\n# 3. if not, add a link to original, you can choose any name for the link or use `upstream`\ngit remote add upstream git@github.com:Asabeneh/30-Days-Of-React.git\n# 4. check again to confirm link added\ngit remote -v\n# 5. now you can fetch updates from original repo, assuming you named this `upstream`\ngit fetch upstream\n# 6. merge the updates to your local master branch\ngit merge upstream/master master\n# 7. push the merged updates to your Forked copy on GitHub\ngit push origin master\n```\n\n> Note that the updates are only applied to the master branch. If you wish to update any other branch, repeat steps 6-7 with the branch name. See snippet below for `exercise-solutions` branch\n\n```bash\ngit merge upstream/master exercise-solutions\ngit push origin exercise-solutions\n```\n\n## Setup\n\nI believe you have the motivation and a strong desire to be a developer, a computer and Internet. In addition to that basic to intermediate level HTML, CSS and JS. If you have those, then you have everything to get started.\n\n### Install Node.js\n\nYou may not need node.js right now but you may need it for later. Install [node.js](https://nodejs.org/en/).\n\n![Node download](images/download_node.png)\n\nAfter downloading double click and install\n\n![Install node](images/install_node.png)\n\nWe can check if node is installed on our local machine by opening our device terminal or command prompt.\n\n```sh\nasabeneh $ node -v\nv12.14.0\n```\n\nWhen making this tutorial I was using node version 12.14.0, but now the recommended version of node.js for download is 12.17.0.\n\n### Browser\n\nThere are many browsers out there. However, I strongly recommend Google Chrome.\n\n#### Installing Google Chrome\n\nInstall [google chrome](https://www.google.com/chrome/) if you do not have one yet. We can write small JavaScript code on the browser console, but we do not use the browser console to develop applications.\n\n![Google Chrome](images/google_chrome.png)\n\n#### Opening Google Chrome Console\n\nYou can open Google Chrome console either by clicking three dots at the top right corner of the browser, selecting _More tools -> Developer tools_ or using a keyboard shortcut. I prefer using shortcuts.\n\n![Opening chrome](images/opening_developer_tool.png)\n\nTo open the Chrome console using a keyboard shortcut. It is good to know the shortcut too as a JavaScript and React developer you will spend much time on a browser console and don't be lazy to open it during development.\n\n```sh\nMac\nCommand+Option+J\n\nWindows/Linux:\nCtl+Shift+J\n```\n\n![Opening console](images/opening_chrome_console_shortcut.png)\n\nAfter you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console. The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code.\nLet us write a JavaScript code on the Google Chrome console:\n\n![write code on console](./images/js_code_on_chrome_console.png)\n\n#### Writing Code on Browser Console\n\nWe can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using:\n\n```sh\nMac\nCommand+Option+I\n\nWindows:\nCtl+Shift+I\n```\n\n##### Console.log\n\nTo write our first JavaScript code, we used a built-in function **console.log()**. We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function.\n\n```js\nconsole.log('Hello, World!')\n```\n\n##### Console.log with Multiple Arguments\n\nThe **console.log()** function can take multiple parameters separated by comma. The syntax looks like as follows:**console.log(param1, param2, param3)**\n\n![console log multiple arguments](./images/console_log_multipl_arguments.png)\n\n```js\nconsole.log('Hello', 'World', '!')\nconsole.log('HAPPY', 'NEW', 'YEAR', 2020)\nconsole.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')\n```\n\nAs you can see from the snippet code above, _console.log()_ can take multiple arguments. It is recommended to use as many console.log() prints to check what is happening in your code but don't keep all console.log() tests on your code forever. Make your life easy by keeping the browser console open.\n\n##### Comments\n\nWe add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code.In JavaScript, any text line starting with // in JavaScript is a comment, and anything enclosed like this /\\* \\*/ is also a comment.\n\n**Example: Single Line Comment**\n\n// This is the first comment \n // This is the second comment \n // I am a single line comment\n\n**Example: Multiline Comment**\n\n/\\*\nThis is a multiline comment \n Multiline comments can take multiple lines \n JavaScript is the language of the web \n \\*/\n\n##### Syntax\n\nProgramming languages are similar to human languages. English or many other language uses words, phrases, sentences, compound sentences and other more to convey a meaningful message. The English meaning of syntax is _the arrangement of words and phrases to create well-formed sentences in a language_. The technical definition of syntax is _the structure of statements in a computer language._ Programing languages have syntax. JavaScript is a programming language and like other programming languages it has its own syntax. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.\n\n![Error](images/raising_syntax_error.png)\n\nI made a deliberate mistake. As a result, the console raises syntax errors. Actually, the syntax is very informative. It informs what type of mistake was made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors:\n\n```js\nconsole.log('Hello, World!')\nconsole.log('Hello, World!')\n```\n\nSo far, we saw how to display text using the _console.log()_. If we are printing text or string using _console.log()_, the text has to be inside the single quotes, double quotes, or a backtick quotes.\n**Example:**\n\n```js\nconsole.log('Hello, World!')\nconsole.log('Hello, World!')\nconsole.log(`Hello, World!`)\n```\n\n#### Arithmetics\n\nNow, let us practice more writing JavaScript codes using _console.log()_ on google chrome console for number data types.\nIn addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations.\nThe console can directly take arguments without the **_console.log()_** function. However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.\n\n![Arithmetic](images/arithmetic.png)\n\n```js\nconsole.log(2 + 3) // Addition\nconsole.log(3 - 2) // Subtraction\nconsole.log(2 * 3) // Multiplication\nconsole.log(3 / 2) // Division\nconsole.log(3 % 2) // Modulus - finding remainder\nconsole.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3\n```\n\n### Code Editor\n\nWe can write our codes on the browser console, but it won't do for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days JavaScript challenge, we will be using Visual Studio Code.\n\n#### Installing Visual Studio Code\n\nVisual studio code is a very popular open-source text editor. I would recommend to [download Visual Studio Code](https://code.visualstudio.com/), but if you are in favor of other editors, feel free to follow with what you have.\n\n![Vscode](images/vscode.png)\n\nIf you installed Visual Studio Code, let us start using it.\n\n#### How to Use Visual Studio Code\n\nOpen the Visual Studio Code by double-clicking its icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.\n\n![Vscode ui](./images/vscode_ui.png)\n\n![Vscode add project](./images/adding_project_to_vscode.png)\n\n![Vscode open project](./images/opening_project_on_vscode.png)\n\n![script file](images/scripts_on_vscode.png)\n\n![Installing Live Server](images/vsc_live_server.png)\n\n![running script](./images/running_script.png)\n\n![coding running](./images/launched_on_new_tab.png)\n\nCongratulations! You have completed the setup you need to get started with React, but before we dive into React let's do a JavaScript refresher. If you are very comfortable with JavaScript you may skip day 1 JavaScript refresher. The JavaScript refresher section is vast and it may take more than one day. From my experience people usually get stuck in React because their JavaScript knowledge is very shallow therefore to fill that gap all the necessary JavaScript features which can be used in React are covered in the JavaScript refresher section. There are many exercises but you are not required to solve them. Click [here](../30-Days-Of-React/02_Day_Introduction_to_React/02_introduction_to_react.md) if you want skip JavaScript and jump directly into React.\n\n🎉 CONGRATULATIONS ! 🎉\n\n[Day 1 >>](./01_Day_JavaScript_Refresher/01_javascript_refresher.md)\n" } ]