From 53103293ea1dbe542a99d9366f17682ae2adfc55 Mon Sep 17 00:00:00 2001
From: Michael Rose <michael@rosenetwork.net>
Date: Tue, 5 Sep 2023 02:52:52 -0700
Subject: [PATCH] added countries column to data

---
 src/pages/App.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/App.js b/src/pages/App.js
index 7900e4b..07c99c0 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -1,13 +1,27 @@
 // IMPORT useEffect and useRef
-import { useState} from 'react';
+import { useState, useEffect} from 'react';
 import * as usersAPI from '../utilities/users-api'
 import './App.css';
 
 function App() {
 	const [userData, setUserData] = useState([]);
+	const [countries, setCountries] = useState([]);
   // ADD useRef
 
   // ADD useEffect
+  useEffect(()=>{
+	async function fetchData(){
+	const data = await usersAPI.getUsers()
+	console.log(data)
+	setUserData(data)
+	}
+	fetchData()
+	
+  },[])
+
+  useEffect(()=>{
+	setCountries( Array.from(new Set(userData.map(e=>e.location.country))))
+  },[userData])
 
 	return (
 		<div>
@@ -19,6 +33,7 @@ function App() {
 						<h2 id='countries'>Countries</h2>
 						<ul aria-labelledby='countries'>
               {/* RENDER THE LIST OF COUNTRY NAMES */}
+			  {countries.map(country=>(<li>{country}</li>))}
 						</ul>
 					</section>
 					<section>