Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

138
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!