How to get an array of icon names from multiple map function calls?

Question

I am trying to get icon names from a weather API, and have my react display the icons.

The first part is working, the icon names do appear in the console log. The second part does not...

import { useSelector } from "react-redux";

export default function Icon() {
  const icons = useSelector(
    (state) =>
      state.api.map((i) => {
        console.log(i);
        i.city.list.map((ii) => {
          console.log(ii);
          ii.weather.map((iii) => {
            console.log("icon", iii.icon);
            return iii.icon;
          });
        });
      })
    //state.api[0].city.list[0].weather[0].icon
  );
  console.log(icons);
  return (
    <div>
      <img src={`https://openweathermap.org/img/wn/${icons}.png`} />
    </div>
  );
}

Any ideas?

you need to render a map, Icons does not render anything and should only throw an error. — Display name
– Display name, Commented Jul 18, 2022 at 15:12
the console log on line 10 gives a name of an icon when the component gets called. render method? it's react with hooks ;) — ydrea
– ydrea, Commented Jul 18, 2022 at 15:20
Generally speaking you should also be able to destructure things that you want from state. What is your state model? It should help us in telling you how to do that mapping properly. — axordahaxor
– axordahaxor, Commented Jul 18, 2022 at 15:31

axordahaxor · Accepted Answer · 2022-07-19 06:45:59Z

1

From what you've provided so far it seems to work like so: Make an API call to api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API key} and it gives you the response. From that response icon data can be reached for example like this:

  const obj = api response as javascript object...
  const icon = obj.list[0].weather[0].icon;

and used like you've shown:

<img src={`https://openweathermap.org/img/wn/${icon}.png`} alt="icon" />

However, we can't see what your redux state model is and how requests are eventually saved to state and so on. Which is why it is not obvious what

//state.api[0].city.list[0].weather[0].icon

does as we don't know anything about state.api[0]. This is why it is essential to provide enough information to help you solve the problem at hand. You could've just posted us the openweather data api response example or even better, redux state from that useSelector without any mappings.

People are hesitant to help when they need to get credentials for an API when you could've just provided the information to begin with.

Not trying to be rude here, but make it as easy as possible to help you and things get resolved very quickly :) this is certainly not a tough one to solve when you have all the info needed.

You could show us the state completely and we'll solve it from there or probably come to the conclusion that there is some problem with the first part, meaning state.api[0] or state.api[0].city We can't know how you save the state, but in API you provided city for example doesn't have icon, but that list owns icons. But the tricky part here is that this is all quessing without the actual state.

answered Jul 19, 2022 at 6:45

axordahaxor

1787 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ydrea Over a year ago

thanks for your comments @axordahaxor! the truth is I am a bit reluctant to ask for a solution, as I am trying to learn! Will try to follow your guidance, and, if unsuccessful, will add the requested info. Again, many thanks!

Display name · Accepted Answer · 2022-07-19 03:45:16Z

Please provide more info

Without knowing an example of the icons variable, there is not much help that we can provide.

For now however, I will infer from the code that icons holds an array or some iterable content.

In my experience with java, it will try to apply the array object to the image src which will of course not work.

Generic example of what may work

What you should do is map the icons similar to this:

import { useSelector } from "react-redux";

export default function Icon() {
  const icons = useSelector(
    (state) =>
      state.api.map((i) => {
        console.log(i);
        i.city.list.map((ii) => {
          console.log(ii);
          ii.weather.map((iii) => {
            console.log("icon", iii.icon);
            return iii.icon;
          });
        });
      })
    //state.api[0].city.list[0].weather[0].icon
  );
  console.log(icons);
  return (
    <div>
      {icons.map((e,i)=>{
          return <img src={`https://openweathermap.org/img/wn/${e}.png`} key={"iconsImg"+i}/>
      })}
    </div>
  );
}

Collectives™ on Stack Overflow

How to get an array of icon names from multiple map function calls?

2 Answers 2

1 Comment

Please provide more info

Generic example of what may work

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Please provide more info

Generic example of what may work

Comments

Your Answer

Sign up or log in

Post as a guest

Related