how to display openweather map weather icons react.js

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

OpenWeatherMap / Weather Icons integration · GitHub, However, I can't seem to replace them with these pretty ones. Could you give me a more detailed description on how to proceed? Here is my code so far: screen  How do I use the icon given in the Open Weather API? React js Project Netflix Website Clone. what's your road map for instance my is to learn HTML - CSS


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;

How to Make a Weather App Using React - Leizl Samano, Next, open your project and delete the default contents that App.js comes with. Include a weather icon, temperature reading, and short description of weather conditions. This will allow you to see your React app update live on a local host server. Review the Open Weather Map API docs for notes on the API's available  As a web developer, grabbing data from API's is something you are going to do often.Fetching weather data is a perfect way to get your feet wet. In this article we are going to use the browsers built in fetch with JavaScript to grab data from OpenWeatherMap's API.


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.

react-icons-weather, Keywords. react · react icons · react weather icons · weather-icons · weathericons · icons · open weather map · yahoo · darksky · api  React's weather forecast application using OpenWeatherMap API. react-weather-forecast. React's weather forecast application using OpenWeatherMap API.


weather-icons, Angular 2+ library to display a group of icons coming from weather-icons by Erik Flowers. A ReactJS component library for @erikflowers's weather icons. Hi there! I have included the pre-set weather icons from OpenWeatherMaps in my code. However, I can't seem to replace them with these pretty ones.


how to display weather icons openweather api in react, im trying to display weather icons from open weather map api , but am not entirely sure how to do it , here is the documentation  However, in order for us to test and use this code, we will need to have an account on RapidAPI and a subscription to Open Weather Map. You can quickly set up an account and subscribe to the basic plan, which gives us 100 calls per day (not exceeding 10 calls per minute) for free using the Open Weather Map API.


Tutorial: build a weather app with React, Display the city name, current weather icon, temperature, humidity and wind ReactJS uses a special syntax called JSX, not the normal JS one. var rootUrl = 'http://api.openweathermap.org/data/2.5/weather?q='; var apiUrl  React open weather is a React Component loading forecast data from OpenWeather API https://react-open-weather.gitbook.io… react weather-icons widget apixu-api 191 commits