import React from "react";
import ReactDOM from "react-dom";
import Weather from "../Weather";

class WeatherList extends React.Component {

    constructor(props) {
        super(props);
        this.state = { periods: [] };
    }

    remove() {

    }
    render() {
        return (
            <div>
                {
                    this.state.periods.map((period, index) => {
                        return <Weather
                            key={index}
                            name={period.name}
                            temperature={period.temperature}
                            temperatureUnit={period.temperatureUnit}
                            detailedForecast={period.detailedForecast}
                            dataclick={this.remove}
                        />
                    })
                  
                });
            }

            </div>
        );
    }
    getData() {
        fetch("https://api.weather.gov/gridpoints/MLB/25,69/forecast")
           .then(response => response.json())       
           .then(data => this.setState({ periods : data.properties.periods}))
           .then(data => console.log(data));  
           this.setState({
               detailedForcast : 'Test Detailed forcast',
               name : 'Test data',
               temperature : '90',
               temperatureUnit : 'Celcius'});
   
       }
     
     componentDidMount() { 
         this.getData();
     }

}
export default WeatherList;