Icons in ReactJS

1

How can I add open weather API icons in my react code?

I tried this
<img src={http://openweathermap.org/img/wn/{weather[0].icon}@2x.png}></img>

Whole Code:

import React, { useState } from "react";

import "./App.css";

const api = {

  key: "key",

  base: "https://api.openweathermap.org/data/2.5/",

};

function App() {

  const [query, setQuery] = useState('');

  const [weather, setWeather] = useState({});

  const search = evt => {

    if (evt.key === "Enter") {

      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)

        .then(res => res.json())

        .then(result => {

          setWeather(result);

          setQuery('');

          // console.log(result);

        });

    }

  }

  

  const dateBuilder = (d) => {

    let months = [

      "JANUARY",

      "FEBRUARY",

      "MARCH",

      "APRIL",

      "MAY",

      "JUNE",

      "JULY",

      "AUGUST",

      "SEPTEMBER",

      "OCTOBER",

      "NOVEMBER",

      "DECEMBER",

    ];

    let days = [

      "SUNDAY",

      "MONDAY",

      "TUESDAY",

      "THURSDAY",

      "FRIDAY",

      "SATURDAY",

    ];

    let day = days[d.getDay()];

    let date = d.getDate();

    let month = months[d.getMonth()];

    let year = d.getFullYear();

    return `${day} ${date} ${month} ${year}`;

  };

  

  return (

    <div className="app">

      <main>

        <h1>Weather App</h1>

        <div className="date">{dateBuilder(new Date())}</div>

        <div className="search-box">

          <input

            type="text"

            className="search-bar"

            placeholder="Search..."

            onChange={(e) => setQuery(e.target.value)}

            value={query}

            onKeyPress={search}

          ></input>

        </div>

        {(typeof weather.main != "undefined") ? (

        <div>

          <div className="location-box">

            <div className="location">{weather.name}, {weather.sys.country}</div>

          </div>

          <div className="weather-box">

            <div className="temp">

              {Math.round(weather.main.temp)}°c

            </div>

            <div className="weather">

              <img src={`http://openweathermap.org/img/wn/{weather[0].icon}@2x.png`}></img>

            </div>

          </div>

        </div>

        ) : ('')}

      </main>

    </div>

  );

}

export default App;
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

An example of the img tag is:

<img  src = "http://openweathermap.org/img/wn/04d@2x.png" />

URL breakdown

Base url: http://openweathermap.org/img/wn/
Image code: 04d
Url extension: @2x.png
full url = Base url + Image code + Url extension

4

I hope that is not your real API key. If it is, remove it from the post.

1 Like
5

Hello there,

Here is how to use Template Literals.

Have a look at that, to see where you are going wrong.

Hope it helps

1 Like