edit1

src/App.js

-import React, { Component } from 'react';
-
-const cityList = [
-  {cityName: "Seoul", timezone: "Asia/Seoul"},
-  {cityName: "London", timezone: "Europe/London"},
-  {cityName: "NewYork", timezone: "America/New_York"},
-];
+import React, { Component, useState } from "react";
 
 const TimeButton = (props) => {
   let [time, setTime] = useState(null);
+
   const displayTime = () => {
     let date = new Date();
     setTime(date.toLocaleString("ko-KR", { timeZone: props.tz }));
@@ -15,25 +10,32 @@ const TimeButton = (props) => {
 
   return (
     <>
-    <button onClick={displayTime} tz={props.tz}>{props.name}</button>
-    <div id='time'>{time}</div>
+      <button onClick={displayTime} tz={props.tz}>
+        {props.cn}
+      </button>
+      <div id="time">{time}</div>
     </>
   );
-}
+};
 
 const App = (props) => {
-    let city = cityList.map((value => {
+  var cityList = [
+    { cityName: "Seoul", timezone: "Asia/Seoul" },
+    { cityName: "New_York", timezone: "America/New_York" },
+    { cityName: "Tokyo", timezone: "Asia/Tokyo" },
+  ];
+
+  let city = cityList.map((value) => {
     console.log(value.cityName);
-      return <TimeButton name={value.cityName} tz={value.timezone} />;
-    }));
+    return <TimeButton cn={value.cityName} tz={value.timezone} />;
+  });
 
   return (
     <>
-      <h1>
-        What time is it?
-      </h1>
+      <h1>What time is it?</h1>
+      <div>{city}</div>
     </>
   );
-}
+};
 
 export default App;