diff --git a/src/App.js b/src/App.js
index a19d568b95bfa4966ad84ecd996352194fff5cc3..4501695dc3342b241165ec5c8234f8bec860096b 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,8 @@
-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);
+  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 => {
-      console.log(value.cityName);
-      return <TimeButton name={value.cityName} tz={value.timezone} />;
-    }));
+  var cityList = [
+    { cityName: "Seoul", timezone: "Asia/Seoul" },
+    { cityName: "New_York", timezone: "America/New_York" },
+    { cityName: "Tokyo", timezone: "Asia/Tokyo" },
+  ];
 
-    return (
-      <>
-      <h1>
-        What time is it?
-      </h1>
-      </>
-    );
-}
+  let city = cityList.map((value) => {
+    console.log(value.cityName);
+    return <TimeButton cn={value.cityName} tz={value.timezone} />;
+  });
+
+  return (
+    <>
+      <h1>What time is it?</h1>
+      <div>{city}</div>
+    </>
+  );
+};
 
-export default App;
\ No newline at end of file
+export default App;