score:4

Accepted answer

in order for you to display the icon, you need to use the url and not just icon value. something like this

the value returned from the api is '09d'. so you will have to append the url with string url to have the weather api url appended with image and image extension.

{http://openweathermap.org/img/w/${props.icon}.png}

enter image description here few other things noticed in your code is ,

you are setting default values as undefined, which is not correct.

please use proper value, something like

state = { temperature: '', city: '' }

https://codesandbox.io/s/6102m4kn3r

score:0

you have to make change in src attribute of <img>. as given in weathermap api you have to request icon by http://openweathermap.org/img/w/10d.png. replace 10d.png by props.icon+'.png'. it will work.

score:2

as per your code in weather.js

<img src ={`http://openweathermap.org/img/w/${this.props.icon}.png`} alt="wthr img" />

it will display the weather icon...ie

 import react, { component } from 'react';
 class weather extends component {
    render() {
    return ( 
      <div>   
      <p>weathernow:
      <img src ={`http://openweathermap.org/img/w/${this.props.icon}.png`} 
         alt="wthr img" />
     </p>
        </div>

    );  
      }
      }

 export default weather;

Related Query

More Query from same tag