Если оператор не работает в компоненте React

Я получаю данные из API погоды и хочу, чтобы они были анимированы с помощью этого компонента. Например, если температура выше, скажем, 20, я хочу, чтобы отображалось «const sunny». Я дошел до того, что заставил его появиться после получения данных, но оператор if не работает независимо от того, какой темп. есть, он по-прежнему вызывает переменную «облачно».

Погоду получает функция getWeather в компоненте App.jsx. Пожалуйста, помогите. Что мне не хватает?

import React, { Component } from 'react'
import ReactAnimatedWeather from 'react-animated-weather';

const sunny = {
    icon: 'CLEAR_DAY',
    color: 'red',
    size: 200,
    animate: true
  };

  const cloudy = {                                      
    icon: 'PARTLY_CLOUDY_DAY',
    color: 'blue',
    size: 200,
    animate: true
  };

export default class Display extends Component {
  constructor(props) {
    super(props)    
    this.state = {
      animationData : 
      { icon: '',
      color: '',
      size: 0,
      animate: false},
      hasrecieved : true
      }

    this.getanimation = this.getanimation.bind(this)
  }

getanimation() { 
  let animationData = this.state.animationData
if (this.state.temperature < 1) {
  animationData = sunny
} else {
 animationData = cloudy
}
  this.setState({
    animationData: animationData,
    hasrecieved: true
  })
}

componentWillReceiveProps(nextProps) { 
    if (this.props !== nextProps) {
    this.setState(nextProps)
  }
  this.getanimation()  
}

  render() {
    console.info(this.state)
    return (
        <div>
    { this.state.hasrecieved && <ReactAnimatedWeather
      icon = {this.state.animationData.icon}
      color = {this.state.animationData.color}
      size = {this.state.animationData.size}
      animate = {this.state.animationData.animate}
    />}
    </div>
    )
  }
}