Icons in ReactJS

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") {


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

        .then(result => {



          // console.log(result);





  const dateBuilder = (d) => {

    let months = [














    let days = [








    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">


        <h1>Weather App</h1>

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

        <div className="search-box">





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





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


          <div className="location-box">

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


          <div className="weather-box">

            <div className="temp">



            <div className="weather">

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




        ) : ('')}





export default App;

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.

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

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

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

1 Like

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