how to display weather icons openweather api in react

Question

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 inthe image url just like its written in the docs but im just getting a broken image instead ,can someone please tell me what i am doing wrong? thanks

App,js

class App extends React.Component {
  state = {
    temperature: "",
    city: "",
    country: "",
    pressure: "",
    humidity: "",
    description: "",
    rain:"",
    main:"Drizzle",
    icon: "09d",
    error: ""
  }

  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();

    if (city) {
      this.setState({
        temperature: data.main.temp,
        city: data.name,
        main: data.main,
        data.weather[0].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={'http://openweathermap.org/img/w/${props.icon}.png'}/>
  </div>





export default Weather;

`icon` prop is under `weather` object array. `icon: data.icon` should be `icon: data.weather[0].icon` — bennygenel, May 25 '18 at 18:59
Maybe `props.icon` is returning "09d" instead of just 09d. Try calling `src={'http://openweathermap.org/img/w/$' + {props.icon} + '.png'}` — Pat Mellon, May 25 '18 at 19:09
returns an error in the console : Failed to load resource: the server responded with a status of 404 (Not Found) — Leo Bogod, May 25 '18 at 19:19
Your image src is wrong too. you nee to use back-ticks not single quotes. https://stackoverflow.com/questions/47067319/back-tick-vs-single-quote-in-js — bennygenel, May 25 '18 at 19:29
Take out the `$`. This link works: http://openweathermap.org/img/w/09d.png — Pat Mellon, May 25 '18 at 19:43

Pat Mellon · Answer 1 · 2018-05-25T20:26:03.517

If you call the image like this <img className="img-fluid" src="openweathermap.org/img/w/" + {props.icon} + ".png"/> and you still see an error, that probably means you're trying to view the image before props.icon is available--before the api call returns the data.

Add something like loading: true to your state. Then add something like this to getWeather:

fetch("http://api.openweathermap.org/data/2.5/weather?q=${this.state.city}&appid=${API_KEY}&units=metric")
.then(data => data.json())
.then(data => this.setState({ loading: false }));

(You'll also want to use data in the above line to set all of the appropriate values like you're already doing.)

Update handlenum1Change to actually grab the value of the city that's entered:

this.setState({ city: evt.target.value });

Then wrap the Weather component:

{ this.state.loading ? '' : <Weather/> }

With the above line nothing should display until the data is returned from fetch.

score 0 · Answer 2 · edited Aug 30 '21 at 01:31

0

You have to use the URL, instead of just the icon value. In this case, you can use:

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

The final code should be:

<img src = {'http://openweathermap.org/img/w/${this.state.icon}.png'}/>

edited Aug 30 '21 at 01:31

kyun

9,710
9
31
66

answered Aug 26 '21 at 01:01

evasharma12

91
2

how to display weather icons openweather api in react

2 Answers2