title: Error in calling hooks somwhere in the code
body: <p>I am new to react and facing this error &quot;Invalid hook call for any of these reasons&quot;</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app</li>
  </ol>
  <p>I have checked all the conditions on the official website there are no issue</p>
  <p>Here is error which is being shown in the first line &quot;this.setState()&quot;</p>
  <pre><code> this.setState({
        lat: lat,
        lon: lon,
        city: data.name,
        temperatureC: Math.round(data.main.temp),
        temperatureF: Math.round(data.main.temp * 1.8 + 32),
        humidity: data.main.humidity,
        main: data.weather[0].main,
        country: data.sys.country,
        // sunrise: this.getTimeFromUnixTimeStamp(data.sys.sunrise),
  
        // sunset: this.getTimeFromUnixTimeStamp(data.sys.sunset),
      }); 
  </code></pre>
  <p>The main program is this</p>
  <pre><code>import React from &quot;react&quot;;
  import apiKeys from &quot;./apiKeys&quot;;
  import Clock from &quot;react-live-clock&quot;;
  import Forcast from &quot;./forcast&quot;;
  import loader from &quot;./images/WeatherIcons.gif&quot;;
  import ReactAnimatedWeather from &quot;react-animated-weather&quot;;
  const dateBuilder = (d) =&gt; {
    let months = [
      &quot;January&quot;,
      &quot;February&quot;,
      &quot;March&quot;,
      &quot;April&quot;,
      &quot;May&quot;,
      &quot;June&quot;,
      &quot;July&quot;,
      &quot;August&quot;,
      &quot;September&quot;,
      &quot;October&quot;,
      &quot;November&quot;,
      &quot;December&quot;,
    ];
    let days = [
      &quot;Sunday&quot;,
      &quot;Monday&quot;,
      &quot;Tuesday&quot;,
      &quot;Wednesday&quot;,
      &quot;Thursday&quot;,
      &quot;Friday&quot;,
      &quot;Saturday&quot;,
    ];
  
    let day = days[d.getDay()];
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();
  
    return `${day}, ${date} ${month} ${year}`;
  };
  const defaults = {
    color: &quot;white&quot;,
    size: 112,
    animate: true,
  };
  class Weather extends React.Component {
    state = {
      lat: undefined,
      lon: undefined,
      errorMessage: undefined,
      temperatureC: undefined,
      temperatureF: undefined,
      city: undefined,
      country: undefined,
      humidity: undefined,
      description: undefined,
      icon: &quot;CLEAR_DAY&quot;,
      sunrise: undefined,
      sunset: undefined,
      errorMsg: undefined,
    };
  
    componentDidMount() {
      if (navigator.geolocation) {
        this.getPosition()
          //If user allow location service then will fetch data &amp; send it to get-weather function.
          .then((position) =&gt; {
            this.getWeather(position.coords.latitude, position.coords.longitude);
          })
          .catch((err) =&gt; {
            //If user denied location service then standard location weather will le shown on basis of latitude &amp; latitude.
            this.getWeather(28.67, 77.22);
            alert(
              &quot;You have disabled location service. Allow 'This APP' to access your location. Your current location will be used for calculating Real time weather.&quot;
            );
          });
      } else {
        alert(&quot;Geolocation not available&quot;);
      }
  
      this.timerID = setInterval(
        () =&gt; this.getWeather(this.state.lat, this.state.lon),
        600000
      );
    }
  
    componentWillUnmount() {
      clearInterval(this.timerID);
    }
  
    // tick = () =&gt; {
    //   this.getPosition()
    //   .then((position) =&gt; {
    //     this.getWeather(position.coords.latitude, position.coords.longitude)
    //   })
    //   .catch((err) =&gt; {
    //     this.setState({ errorMessage: err.message });
    //   });
    // }
  
    getPosition = (options) =&gt; {
      return new Promise(function (resolve, reject) {
        navigator.geolocation.getCurrentPosition(resolve, reject, options);
      });
    };
    getWeather = async (lat, lon) =&gt; {
      const api_call = await fetch(
        `${apiKeys.base}weather?lat=${lat}&amp;lon=${lon}&amp;units=metric&amp;APPID=${apiKeys.key}`
      );
      const data = await api_call.json();
      this.setState({
        lat: lat,
        lon: lon,
        city: data.name,
        temperatureC: Math.round(data.main.temp),
        temperatureF: Math.round(data.main.temp * 1.8 + 32),
        humidity: data.main.humidity,
        main: data.weather[0].main,
        country: data.sys.country,
        // sunrise: this.getTimeFromUnixTimeStamp(data.sys.sunrise),
  
        // sunset: this.getTimeFromUnixTimeStamp(data.sys.sunset),
      });
      switch (this.state.main) {
        case &quot;Haze&quot;:
          this.setState({ icon: &quot;CLEAR_DAY&quot; });
          break;
        case &quot;Clouds&quot;:
          this.setState({ icon: &quot;CLOUDY&quot; });
          break;
        case &quot;Rain&quot;:
          this.setState({ icon: &quot;RAIN&quot; });
          break;
        case &quot;Snow&quot;:
          this.setState({ icon: &quot;SNOW&quot; });
          break;
        case &quot;Dust&quot;:
          this.setState({ icon: &quot;WIND&quot; });
          break;
        case &quot;Drizzle&quot;:
          this.setState({ icon: &quot;SLEET&quot; });
          break;
        case &quot;Fog&quot;:
          this.setState({ icon: &quot;FOG&quot; });
          break;
        case &quot;Smoke&quot;:
          this.setState({ icon: &quot;FOG&quot; });
          break;
        case &quot;Tornado&quot;:
          this.setState({ icon: &quot;WIND&quot; });
          break;
        default:
          this.setState({ icon: &quot;CLEAR_DAY&quot; });
      }
    };
  
    render() {
      if (this.state.temperatureC) {
        return (
          &lt;React.Fragment&gt;
            &lt;div className=&quot;city&quot;&gt;
              &lt;div className=&quot;title&quot;&gt;
                &lt;h2&gt;{this.state.city}&lt;/h2&gt;
                &lt;h3&gt;{this.state.country}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div className=&quot;mb-icon&quot;&gt;
                {&quot; &quot;}
                &lt;ReactAnimatedWeather
                  icon={this.state.icon}
                  color={defaults.color}
                  size={defaults.size}
                  animate={defaults.animate}
                /&gt;
                &lt;p&gt;{this.state.main}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div className=&quot;date-time&quot;&gt;
                &lt;div className=&quot;dmy&quot;&gt;
                  &lt;div id=&quot;txt&quot;&gt;&lt;/div&gt;
                  &lt;div className=&quot;current-time&quot;&gt;
                    &lt;Clock format=&quot;HH:mm:ss&quot; interval={1000} ticking={true} /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;current-date&quot;&gt;{dateBuilder(new Date())}&lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;temperature&quot;&gt;
                  &lt;p&gt;
                    {this.state.temperatureC}°&lt;span&gt;C&lt;/span&gt;
                  &lt;/p&gt;
                  {/* &lt;span className=&quot;slash&quot;&gt;/&lt;/span&gt;
                  {this.state.temperatureF} &amp;deg;F */}
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;Forcast icon={this.state.icon} weather={this.state.main} /&gt;
          &lt;/React.Fragment&gt;
        );
      } else {
        return (
          &lt;React.Fragment&gt;
            &lt;img src={loader} style={{ width: &quot;50%&quot;, WebkitUserDrag: &quot;none&quot; }} /&gt;
            &lt;h3 style={{ color: &quot;white&quot;, fontSize: &quot;22px&quot;, fontWeight: &quot;600&quot; }}&gt;
              Detecting your location
            &lt;/h3&gt;
            &lt;h3 style={{ color: &quot;white&quot;, marginTop: &quot;10px&quot; }}&gt;
              Your current location wil be displayed on the App &lt;br&gt;&lt;/br&gt; &amp; used
              for calculating Real time weather.
            &lt;/h3&gt;
          &lt;/React.Fragment&gt;
        );
      }
    }
  }
  
  export default Weather;
  </code></pre>