title: How to make variable be still defined after EventListener in reactJS?
body: <p>I have problem with variable "icons" in my code. Its initialized and defined in EventListener scope but it is not defined after that scope so I got an error when I try to compile. I really don't know how to make global variable in reactJS and after searching for it looks like its not recommended to do so. So is there a way to make that variable work outside EventListener scope so class "Demo" could use it?</p>
  
  <pre><code>import React from 'react';
  import logo from './logo.png';
  import './App.css';
  import Skycons from 'react-skycons';
  
  function App() {
    return (
      &lt;div className="App"&gt;
  
          &lt;img src={logo} className="App-logo" alt="logo" /&gt;
  
          &lt;div class="location"&gt; 
      &lt;h1 class="location-timezone"&gt; Lokalizacja &lt;/h1&gt;
      &lt;Demo /&gt;    
  &lt;/div&gt;
  
  &lt;div class="temperature"&gt;
      &lt;div class="degree-section"&gt;
  
      &lt;h2 class="temperature-degree"&gt; Brak &lt;/h2&gt;
          &lt;span&gt; °C &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="temperature-description"&gt; Brak &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="sekcja-jutro"&gt;
      &lt;h1&gt;Pogoda na Jutro: &lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="minimalna"&gt;
      &lt;span&gt;Minimalna:&lt;/span&gt;
      &lt;h1 class="temperatura-minimalna"&gt; Brak &lt;/h1&gt;
      &lt;span&gt; °C &lt;/span&gt; 
  &lt;/div&gt;
  
  &lt;div class="maksymalna"&gt;
      &lt;span&gt;Maksymalna:&lt;/span&gt;
      &lt;h1 class="temperatura-maksymalna"&gt; Brak &lt;/h1&gt;
      &lt;span&gt;°C&lt;/span&gt;
  &lt;/div&gt;
  
      &lt;/div&gt;
  
  
    );
  }
  
  window.addEventListener('load',()=&gt; {
      let long;
      let lat;
      let temperatureDescription = document.querySelector(".temperature-description");
      let temperatureDegree = document.querySelector(".temperature-degree");
      let locationTimezone = document.querySelector(".location-timezone");
      let minimalna = document.querySelector(".temperatura-minimalna");
      let maksymalna = document.querySelector(".temperatura-maksymalna");
  
      if(navigator.geolocation){
              navigator.geolocation.getCurrentPosition(position =&gt;{
                  long = position.coords.longitude;
                  lat = position.coords.latitude;
  
                  const proxy = "https://cors-anywhere.herokuapp.com/";
                  const api = `${proxy}https://api.darksky.net/forecast/1539bbb708779eef3993021296196cb2/${lat},${long}`;
  
                  fetch(api)
              .then(response =&gt;{
                  return response.json(); 
              })
              .then(data =&gt; {
                  console.log(data);
                  const {temperature, summary, icon} = data.currently;
  
                  var icons;  //there is initialized
                  icons = icon.replace(/-/g, "_").toUpperCase();  //there is defined
                  console.log(icons); //There I make it display in console so I see that it works as it should
  
                  temperatureDegree.textContent = temperature;
                  let celcjusz = (temperature - 32) * 5/9;
                  temperatureDegree.textContent = Math.floor(celcjusz);
                  temperatureDescription.textContent = summary;
                  locationTimezone.textContent = data.timezone;
  
                  const {temperatureLow} = data.daily.data[1];
                  minimalna.textContent = temperatureLow;          
                  let celcjusz1 = (temperatureLow - 32) * 5/9;
                  minimalna.textContent = Math.floor(celcjusz1);
  
                  const {temperatureMax} = data.daily.data[1];
                  maksymalna.textContent = temperatureMax;          
                  let celcjusz2 = (temperatureMax - 32) * 5/9;
                  maksymalna.textContent = Math.floor(celcjusz2);
              });
              });
          }
      });
        class Demo extends React.Component {
          render () {
            return (
              &lt;Skycons 
                class="icon"  
                color='white' 
                icon={icons}  //There I make display icon as anything is in "icons" variable but after compiling I got error that icons is not defined
                autoplay={true}
                height="130"                 
              /&gt;
            )
          }
        }
  export default App;
  </code></pre>