import React, {Component} from 'react';
import $ from 'jquery';
import CurrentWeatherCard from './CurrentWeatherCard';

export default class App extends Component {
  constructor(){
    super()
    this.state = {
      location:'',
      weatherData: null,
    };
  }

  handleInput(e) {
    this.setState({
      location: e.target.value,
    })
  }

  handleSubmit(){
    const currentLocation = this.state.location
    $.get(`http://api.wunderground.com/api/878e77b9c3411d19/hourly/conditions/forecast10day/q/${currentLocation}.json`).then((data)=> {
      this.setState({
        location:'',
        weatherData: data,
      })
    })
  }


  render() {
    return (
      <div>
        <navbar>
          <input type="text" value={this.state.location} onChange={this.handleInput.bind(this)}/>
          <input type="submit" onClick={this.handleSubmit.bind(this)}/>
        </navbar>
        <h1 className="welcomeHeader">Weathrly</h1>
        <CurrentWeatherCard weatherData={this.state.weatherData}/>
      </div>
    )
  }
}

@@ -227,31 +227,107 @@
 n:'',%0A      
-weather
+responseData: null,%0A      currentData: null,%0A      forecastData: null,%0A      hourly
 Data: null,%0A
@@ -621,24 +621,131 @@
 data)=%3E %7B%0A  
+    this.handleData(data)%0A    %7D)%0A  %7D%0A%0A  handleData(weatherData)%7B%0A    const keys = Object.keys(weatherData)%0A
     this.set
@@ -754,26 +754,24 @@
 ate(%7B%0A      
-  
 location:'',
@@ -781,37 +781,162 @@
     
-  weatherData: data,%0A      %7D)
+responseData:weatherData%5Bkeys%5B0%5D%5D,%0A      currentData:weatherData%5Bkeys%5B1%5D%5D,%0A      forecastData:weatherData%5Bkeys%5B2%5D%5D,%0A      hourlyData:weatherData%5Bkeys%5B3%5D%5D,
 %0A   
@@ -944,17 +944,16 @@
 %7D)%0A  %7D%0A%0A
-%0A
   render

Handle data into individual states.