CODEWITHSUNDEEP
javascriptreactjsimageurl
Roberto Chirila
Roberto Chirila

Reputation: 125

URL get's corrupted when React attempts to render an icon

Guys I am currently developing a weather app and I have a bunch of icons on a remote location that I have to render. I have a function that hits the API that returns the forecast for the next 5 days. In that chunk of data I also have the names of the icons "0d" "1d" etc. What I have attempted to do is to inject the icon name into the API that I am hitting. When I am console logging the link that I have created everything looks fine, but when I am clicking on the link I am getting something like this "https:// openweathermap.org/img/wn/10d.png%E2%80%8B" it always adds those trailing characters when it is making the call which I don't know why it happens.

I will post my code below so that you guys can see

import React from "react";

export const NextDaysWeatherForecast = (props) => {
const { nextDaysWeather } = props;
var auxIndex = 0;
var icon;

return (
    <div>
        {nextDaysWeather.map((days, index) => {
            if (auxIndex < nextDaysWeather.length) {
                let requiredDay = nextDaysWeather[auxIndex];
                auxIndex = auxIndex + 8;
                icon = requiredDay.weather[0].icon;
                let iconAPI = `http://openweathermap.org/img/wn/${icon}.png​`; // I have used string literals to inject the variable
                console.log(iconAPI); // this prints correctly to the console
                return (
                    <div key={index}>
                        <span>def</span>
                        <span>{requiredDay.main.temp}&deg;C</span>
                        <span>{requiredDay.weather[0].description}</span>
                        <img src={iconAPI}></img>// however the image is not displayed
                    </div>
                );
            }
        })}
    </div>
);
};

Upvotes: 0

Views: 109

Answers (1)

Luke Woodward
Luke Woodward

Reputation: 65034

There is a zero-width space hiding in your URL, after the g in png and before the backtick. %E2%80%8B is the UTF-8 encoding of a zero-width space (https://www.fileformat.info/info/unicode/char/200b/index.htm).

Upvotes: 1

Related Questions