<file_sep>import React, { Component } from "react";

export default class CurrentWeather extends Component {
  render() {
    const {
      temp,
      city_name,
      icon,
      description,
      date,
      is_day,
      error
    } = this.props;
    return (
      <div>
        <div className="current-weather__container">
          <h3 className="current-weather__city">{city_name}</h3>
          <div className="current-weather__tempt">
            <img src={icon}/>
            <div className='current-weather__tempt_heading'><h2>{temp} {city_name ? '°C' : null}</h2></div>
          </div>
          <span className="current-weather__text">{description}</span>
          <span className="current-weather__date">{date}</span>
        </div>
      </div>
    );
  }
}
<file_sep>import React, { Component } from "react";
import DayWeather from './DayWeather';
export default class ForecastDays extends Component {
  render() {
    const { forecast_days } = this.props;
    return (
      <div className='forecast_days_container'>
        {forecast_days &&
          forecast_days.map((day, idx) => {
            return (
              <DayWeather
                forecast_day={forecast_days}
                day={day}
                key={idx}
              />
            );
          })}
      </div>
    );
  }
}
<file_sep>import React, { Component } from "react";
import GetCity from "./components/left-side/GetCity";
import CurrentWeather from "./components/left-side/CurrentWeather";
import ForeastDay from "./components/right-side/ForecastDays";
import "./App.css";

export default class App extends Component {
  state = {
    temp: undefined,
    city_name: undefined,
    icon: undefined,
    description: undefined,
    date: undefined,
    is_day: undefined,
    forecast_days: undefined,
    error: undefined,
  };

  handleSubmit = async (e) => {
    e.preventDefault();
    const city = e.target.city.value;

    const api_call = await fetch(
      `http://api.weatherstack.com/forecast?access_key=<KEY>&query=${city}`
    );

    const resp = await api_call.json();
    console.log(resp);
    if (city) {
      this.setState({
        temp: resp.current.temperature,
        city_name: resp.location.name,
        icon: resp.current.weather_icons[0],
        description: resp.current.weather_descriptions,
        date: resp.forecast["2020-06-10"].date,
        is_day: resp.current.is_day,
        forecast_days: [],
        error: "",
      });
    } else {
      this.setState({
        error: "Please enter correct valid name of city..",
      });
    }
    console.log(city);
  };

  //local storage

  /*saveStateToLocalStr = () => {
    localStorage.setItem("data", JSON.stringify(this.state))
  };

  takeValueFromLocalStr = () => {
    let data = localStorage.getItem("data");
    city = JSON.parse(city);
    this.setState({
      city_name: city
    });
  };

  componentDidMount = () => {
    this.takeValueFromLocalStr();

    window.addEventListener(
      "beforeunload",
      this.saveStateToLocalStr.bind(this)
    );
  };

  componentWillUnmount = () => {
    window.removeEventListener(
      "beforeunload",
      this.saveStateToLocalStr.bind(this)
    );

    this.saveStateToLocalStr();
  };*/

  render() {
    return (
      <div>
        <div className="main">
          <div className="container">
            <div className="left-side">
              <div className="left-side__container">
                <div className="left-side__title">
                  <h1>My Weather</h1>
                  <p>Find your weather</p>
                </div>

                <GetCity handleSubmit={this.handleSubmit} />
                <CurrentWeather
                  temp={this.state.temp}
                  city_name={this.state.city_name}
                  icon={this.state.icon}
                  description={this.state.description}
                  date={this.state.date}
                  is_day={this.state.is_day}
                  error={this.state.error}
                />
              </div>
            </div>
            <div className="right-side">
              <ForeastDay forecast_days={this.state.forecast_days} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
<file_sep>import React, { Component } from "react";

export default class GetCity extends Component {
  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            name="city"
            className="get-city__input"
            placeholder="City..."
          />
          <button className="get-city__btn" type="submit">
            Get weather
          </button>
        </form>
      </div>
    );
  }
}
