title: Weather Api with React
body: <p>I am quite new to React so I have a simple question I think. I am trying to take the weather description from the API and according to that, I am trying to show different images. I wrote a function getForecast and response.data.weather[0].description turns the right value. So according to that, I am assigning 'image' to different SVG's but in  doesnt turn right.</p>
  <pre><code>import React, { useState } from 'react';
  import axios from 'axios';
  import './Products.css';
  import ProductItem from './ProductItem';
  import Weather from './Weather';
  import { Container, Row, Col } from 'react-bootstrap';
  
  function Products() {
  
    const [imageTemp, setImage] = useState('images/umbrella.svg');
    const getForecast = () =&gt; {
  
      axios({
        method: &quot;GET&quot;,
        url: 'http://api.openweathermap.org/data/2.5/weather?q=Kaunas&amp;appid=7e6e14c967d752abbafb23a1f251b21c'
      })
        .then((response) =&gt; {
          console.log(response.data.weather[0].description);
          if (response.data.weather[0].description === &quot;overcast clouds&quot;) {
            setImage('images/umbrella.svg');
          }
          else if (response.data.weather[0].description === &quot;clear&quot;) {
            setImage('images/sunglasses.svg');
          }
          else {
            setImage('images/snowflake.svg');
          }
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    };
    
    return (
      &lt;div className='products'&gt;
        &lt;Container className=&quot;products-container&quot;&gt;
          &lt;h2 className=&quot;products__title&quot;&gt;Products&lt;/h2&gt;
          &lt;h6 className=&quot;products__subtitle&quot;&gt;Offers Today&lt;/h6&gt;
          &lt;Row&gt;
            &lt;Col xs=&quot;12&quot; md=&quot;6&quot; lg=&quot;6&quot;&gt;
              &lt;Weather
                src={imageTemp}
                path='/'
              /&gt;
            &lt;/Col&gt;
            &lt;Col xs=&quot;12&quot; md=&quot;6&quot; lg=&quot;6&quot;&gt;
              &lt;ProductItem
                src='images/img-2.jpg'
                text='The Best Coffee'
                path='/'
              /&gt;
              &lt;ProductItem
                src='images/img-3.jpg'
                text='Top 100 Books'
                path='/'
              /&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/div&gt;
    );
  }
  
  export default Products;
  </code></pre>
  <p>And here is my Weather component:</p>
  <pre><code>import React from 'react';
  
  function Weather(props) {
      return (
          &lt;div className='banner__item'&gt;
              &lt;figure className='banner__item__pic-wrap'&gt;
                  &lt;img
                      className='banner__item__img'
                      src={props.src}
                  /&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
      );
  }
  
  export default Weather;
  </code></pre>