added updateDOM function

src/App.jsx

@@ -2,51 +2,47 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import './App.css';
 
+const updateDOM = (id, text) => {
+  document.getElementById(id).innerHTML += text;
+};
+
 const App = () => {
   useEffect(() => {
-    // Make the request
     fetch('http://ip-api.com/json')
       .then((response) => response.json())
-      // Do something with the JSON data
       .then((data) => {
-        console.log(data.query);
-        document.getElementById(
-          'ipAddress'
-        ).innerHTML += `IP address: ${data.query}`;
+        updateDOM('ipAddress', data.query);
+        updateDOM('country', data.country);
+        updateDOM('region', data.regionName);
+        updateDOM('city', data.city);
+        updateDOM('provider', data.isp);
       });
 
-    document.getElementById(
-      'screenSize'
-    ).innerHTML += `Screen resolution: ${window.screen.width}x${window.screen.height}`;
+    updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`);
 
     navigator.getBattery().then((battery) => {
-      document.getElementById(
-        'batteryLevel'
-      ).innerHTML += `Battery level: ${Math.round(battery.level * 100)}%`;
-      document.getElementById(
-        'batteryStatus'
-      ).innerHTML += `Battery status: ${(battery.charging) ? '' : 'not '} charging`;
+      updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
+      updateDOM('batteryStatus', `${(battery.charging) ? '' : 'not '} charging`);
     });
 
-    document.getElementById(
-      'memory'
-    ).innerHTML += `Device memory: ${navigator.deviceMemory}GB`;
-
-    document.getElementById(
-      'cores'
-    ).innerHTML += `# of CPU cores: ${navigator.hardwareConcurrency}`;
+    updateDOM('memory', `${navigator.deviceMemory}GB`);
+    updateDOM('cores', navigator.hardwareConcurrency);
   }, []);
 
   return (
     <div className="App">
       <div className="title">Connection</div>
-      <div className="item" id="ipAddress" />
+      <div className="item" id="ipAddress">IP address: </div>
+      <div className="item" id="country">Country: </div>
+      <div className="item" id="region">Region: </div>
+      <div className="item" id="city">City: </div>
+      <div className="item" id="provider">Provider: </div>
       <div className="title">Hardware</div>
-      <div className="item" id="screenSize" />
-      <div className="item" id="batteryLevel" />
-      <div className="item" id="batteryStatus" />
-      <div className="item" id="memory" />
-      <div className="item" id="cores" />
+      <div className="item" id="screenSize">Screen resolution: </div>
+      <div className="item" id="batteryLevel">Battery level: </div>
+      <div className="item" id="batteryStatus">Battery status: </div>
+      <div className="item" id="memory">Device memory: </div>
+      <div className="item" id="cores"># of CPU cores: </div>
     </div>
   );
 };