Pfthb

im trying to display weather icons from open weather map api , but am not entirely sure how to do it , here is the documentation https://openweathermap.org/weather-conditions .. im passing in weather.icon just like its written in the docs but its not working for some reason ,can someone please tell me what i am doing wrong? thanks

app.js

 class App extends React.Component 

 state = 
 temperature: undefined,
 city: undefined,
 country: undefined,
 pressure: undefined,
 humidity: undefined,
 description: undefined,
 rain:undefined,
 icon:undefined,
 error: undefined
 

 handlenum1Change (evt) 



let temp = (evt.target.value);







 getWeather = async (e) => 
 e.preventDefault();
 const city = e.target.city.value;

 const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=$city&appid=$API_KEY&units=metric`);
 const data = await api_call.json();
 console.log(data)
 if (city) 
 this.setState(
 temperature: data.main.temp,
 city: data.name,

 icon: data.weather.icon,
 rain: data.rain,
 pressure: data.main.pressure,
 humidity: data.main.humidity,
 description: data.weather[0].description,
 error: ""
 );
 else 
 this.setState(
 temperature: undefined,
 city: undefined,
 country: undefined,
 humidity: undefined,
 description: undefined,
 pressure:undefined,
 rain : undefined,
 error: "Please enter the values."
 );
 
 
 render() 
 return (
 <div>
 <div className="wrapper">
 <div className="main">
 <div className="container">
 <div className="row">
 <div className="col-xs-5 title-container">

 </div>
 <div className="col-xs-7 form-container">
 <form onSubmit=this.getWeather >

 <input type="text" name="city" onChange=this.handlenum1Change placeholder="City..."/>

 <button>Get Weather</button>
 </form>


 <Weather 
 temperature=this.state.temperature 
 humidity=this.state.humidity
 city=this.state.city
 pressure=this.state.pressure
 description=this.state.description
 rain=this.state.rain
 icon=this.state.icon
 error=this.state.error
 />
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 );
 
;

export default App;

weather.js

import React from 'react';
import PropTypes from 'prop-types';

const Weather = props =>
 <div>
 <p>props.city</p> 

 <p> humidity props.humidity </p> 

 <p> props.description </p>
 <p> temperature props.temperature</p> 
 <p> atmospheric pressure : props.pressure</p> 
 <p> atmospheric pressure : props.rain</p> 
 <img className="img-fluid" src=props.icon />
 </div>





export default Weather; 

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

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

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.

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;