From 30f8217fa3ee6ec381bafba5b793e877e1a826f1 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Fri, 30 Mar 2018 06:08:48 +0530
Subject: [PATCH] Load data into state

---
 src/Components/Weather-App/App.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/Components/Weather-App/App.tsx b/src/Components/Weather-App/App.tsx
index 468b182..a4a03fb 100644
--- a/src/Components/Weather-App/App.tsx
+++ b/src/Components/Weather-App/App.tsx
@@ -40,8 +40,17 @@ export interface Forecast5Days {
   list: Array<ForecaseAtInstance>;
 }
 
-export class WeatherApp extends React.Component {
-  data: Forecast5Days | undefined = undefined;
+export interface WeatherDataState {
+  data: Forecast5Days | undefined;
+}
+
+export class WeatherApp extends React.Component<{}, WeatherDataState> {
+
+  constructor(props: {}) {
+    super(props);
+
+    this.state = { data: undefined };
+  }
 
   componentDidMount() {
     fetch('https://api.openweathermap.org/data/2.5/forecast?q=kolkata&appid=d65cee3c5866168080fa1c4177fdb4a8')
@@ -49,14 +58,10 @@ export class WeatherApp extends React.Component {
         return response.json();
       })
       .then((responseObject) => {
-        this.data = responseObject as Forecast5Days;
+        this.setState({ data: responseObject as Forecast5Days });
       });
   }
 
-  isDataLoaded():this.data is Forecast5Days {
-
-  }
-
   render() {
     return (
       <div className="App">
@@ -65,7 +70,7 @@ export class WeatherApp extends React.Component {
           <h1 className="App-title">Welcome to React</h1>
         </header>
 
-        {this.data!==undefined ? }
+        {this.state.data !== undefined ? JSON.stringify(this.state.data) : 'Data Loading...'}
       </div>
     );
   }