0

Ive been following a tutorial on how to create a weather app using an API & react. I wanted to take the tutorial a step further, and have the background image change based on the weather. I included ID Code props of the weather just like the other props i have (weather, humidty, city, country etc), however im stumped on how i can target the body, or div and change the css styling of it (background image) in the && operator.

Heres my code:

import React, { Component } from 'react'

export default class Weather extends Component {
  render() {
    return (
      <div> 
        { this.props.city && this.props.country && <p>Location: {this.props.city}, {this.props.country}</p> }
        { this.props.temperature && <p>Temperature: {this.props.temperature}</p> }
        { this.props.humidity && <p>Humidity: {this.props.humidity}</p> }
        { this.props.description && <p>Conditions: {this.props.description}</p> }
        { this.props.error && <p> {this.props.error} </p> }
        { this.props.code === 600 && 601 && 602 && 611 && 612 && 615 && 616 && 620 && 621 && 622 &&  <p>Change to Snow background</p>}
        { this.props.code === 200 && 201 && 202 && 210 && 210 && 211 && 212 && 221 && 230 && 231 && 232 && <p>Change to Thunderstorm background</p> }
        { this.props.code === 300 && 301 && 302 && 310 && 311 && 312 && 313 && 314 && 321 && 500 && 501 && 502 && 503 && 504 && 511 && 520 && 521 && 531 && <p>Change to Raining background</p> }
        { this.props.code === 800 && <p>Change to Clear Sky background</p> }
        { this.props.code === 801 && 802 && 803 && 804 && <p>Change to Cloudy background</p> }
      </div>
    )
  }
}
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
juicy j
  • 183
  • 5
  • 20
  • 1
    I think you need to learn how the `&&` operator works first https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators – azium Feb 28 '19 at 01:22
  • 1
    besides the incorrect usage of the `&&` operator, conceptually, how can a code be both `600` and `601` ? Surely you mean to be using the `||` operator (logical OR) – azium Feb 28 '19 at 01:24
  • 1
    then, read why [magic numbers are a bad design](https://stackoverflow.com/q/47882/1218980) and how to refactor them. – Emile Bergeron Feb 28 '19 at 01:30
  • Thank you for your feedback Emile, i sure did mean to use ||. – juicy j Mar 01 '19 at 03:26

1 Answers1

0

you can easily change the style by declaring a style object specifying the initial style and then changing the background property of the style object in accordance with the the props being passed into the component.


  let style = {

   backgroundImage: "url(image.jpg)"
    }

export default class Weather extends Component {
  render() {

    componentDidMount(){


   this.changeBackground();


    }
    componentDidUpdate(){

   this.changeBackground();

    }
    changeBackground = () =>{

   if(this.props.code === 300) {


   style.backgroundImage = "url(rain.jpg)"

}




}

    return (
      <div style={style} > 
        { this.props.city && this.props.country && <p>Location: {this.props.city}, {this.props.country}</p> }
        { this.props.temperature && <p>Temperature: {this.props.temperature}</p> }
        { this.props.humidity && <p>Humidity: {this.props.humidity}</p> }
        { this.props.description && <p>Conditions: {this.props.description}</p> }
        { this.props.error && <p> {this.props.error} </p> }
        { this.props.code === 600 && 601 && 602 && 611 && 612 && 615 && 616 && 620 && 621 && 622 &&  <p>Change to Snow background</p>}
        { this.props.code === 200 && 201 && 202 && 210 && 210 && 211 && 212 && 221 && 230 && 231 && 232 && <p>Change to Thunderstorm background</p> }
        { this.props.code === 300 && 301 && 302 && 310 && 311 && 312 && 313 && 314 && 321 && 500 && 501 && 502 && 503 && 504 && 511 && 520 && 521 && 531 && <p>Change to Raining background</p> }
        { this.props.code === 800 && <p>Change to Clear Sky background</p> }
        { this.props.code === 801 && 802 && 803 && 804 && <p>Change to Cloudy background</p> }
      </div>
    )
  }
}```
Alwin
  • 191
  • 1
  • 1
  • 8
  • i get " Weather.jsx:36 Uncaught TypeError: Cannot assign to read only property 'backgroundImage' of object '#' " when i try this. – juicy j Mar 01 '19 at 15:59