title: Changing background image in ReactJS
body: <p>I am currently working on a weather app that changes background based on time of the day and the weather description. I created a state that handles the background style of the page.</p>
  
  <pre><code>class App extends React.Component {
    constructor() {
      super();
      this.state = {
        city: undefined,
        country: undefined,
        localtime: undefined,
        timezone: undefined,
        temperature: undefined,
        precip: undefined,
        humidity: undefined,
        weather_icon: undefined,
        weather_description: "",
        error: false,
        backgroundStyle: {
          backgroundImage: undefined,
          backgroundColor: 'black',
          backgroundPosition: 'center',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat'
        }
      };
    }
  </code></pre>
  
  <p>I also created a function that handles the logic of the background change. In it also is an array holding the images for the background. For example,</p>
  
  <pre><code>const bgImage = [
        "",
        "'url(img/snowy.jpg)'",
        "'url(img/night.jpg)'",
        "'url(img/sunny.jpg)'",
        "'url(img/stormy.jpg)'",
        "'url(img/sunset.jpg)'",
        "'url(img/night-rain.jpg)'",
        "'url(img/snow-night.jpg)'"
      ]
      // Check for rain
      if (description === 'showers' || description.includes('rain')) {
        if (time &gt;= 20 || (time &gt;= 0 &amp;&amp; time &lt; 7)) {
          this.setState({
            backgroundStyle: {
              backgroundImage: bgImage[6]
            }
          });
        } else if (time &gt; 7 &amp;&amp; time &lt; 20) {
          this.setState({
            backgroundStyle: {
              backgroundImage: bgImage[0]
            }
          });
        } else {
          this.setState({
            backgroundStyle: {
              backgroundImage: bgImage[0]
            }
          });
        }
      }
  </code></pre>
  
  <p>In the render function, I return a div and with the style</p>
  
  <pre><code>&lt;div className="App" style={this.state.backgroundStyle}&gt;
  </code></pre>
  
  <p>The images do not load and I am not exactly sure what I'm doing wrong. Any help please. Thanks.</p>