Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

141
Visualizações
Change the icon by changing the API data

I want to make a web with the subject of weather. I got to the point in the construction process that the icon should change with the change of weather.

    let shiftIcon = () => {

        let icon = "";
        let iconText = data.date[0].weather.code;

        if (iconText == 600) {
            icon = "https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-wind-weather-those-icons-lineal-color-those-icons.png";
            return (
                <img src={icon} />
            );
        } else {
            return null;
        }
    }
   <div className="col col-3">
     {shiftIcon()}
 </div>

And after writing this code, I got an error. Do you have a solution for this?

TypeError: Cannot read properties of undefined (reading '0') shiftIcon E:/Projects and trainings/Education Courses/react.js courses/Person/weather-application/src/components/boxNew.js:32 29 | let shiftIcon = () => { 30 | 31 | let icon = ""

32 | let iconText = data.date[0].weather.code; | ^ 33 | 34 | if (iconText == 600) { 35 | icon = "https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-wind-weather-those-icons-lineal-color-those-icons.png";

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Initially data is undefined. You should use optional chaining to get rid of the runtime exceptions.

Try like this

let iconText = data?.date?.[0]?.weather?.code;
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda