Is it possible to save multiple fetch requests into one state?

[zenith heron]

Hello,

1. I am working on a personal project where I am fetching from an API and retrieving prices from stocks. I am displaying four different stocks on the homepage. The thing is I want to clear up my code because I am having to fetch four times, set state four times, send four props, and render four divs from one component.

I am using an npm package called axios to fetch (although that doesn't matter) I tried using .getall but it wasn't working.
I have tried pushing the data received into an empty global array like this; dataArray.push(res.data) from each fetch but it also did not work. the data received only gives me an object
c: 306.81
d: 7.88
dp: 2.6361
and etc. It does not give me the ticker name.

Here is a link to a scrim of the code from my vscode but NOTE: The app does not work on this scrim, I think because i have dependencies not installed. I am not sure but below i also supplied a live link from my github pages that does work.

Scrim with code (app does not render here)
https://scrimba.com/scrim/cMDGLgSG

Github pages (app does render here 👍, the info related to the first question is on home page and stats component. )
https://diegoram23.github.io/stock-market-watchlist/

Thank you very much for anyone who has made it this far into the reading and I am grateful for being a part of this discord with such smart people.

[velvet remnant]

@zenith heron don't set data directly to state

You need your previous state

What you can do is push the data into an array and the return obj which has prevState obj and data obj

[zenith heron]

Thank you, this works but I seem to have a bug. my useEffect seems to be running twice. Instead of having an array of 4 objects, its 8 objects.
I created a new state const [all, setAll] = useState([]) and then used setAll(all => [...all, res.data]) and i have an empty array on as my dependency. Any idea why?
Did some research and it seems to only happen on developer mode and not on the actual build mode. Thank you again

[zenith heron]

@velvet remnant I think it actually is an error and not due to developer mode because when I render them to the page I get 8 objects. https://scrimba.com/scrim/c2a6Mesa Here is a new scrim of the state and effect i used. It does not log to the console here for some reason but if you have a chance to take a look and point me in the right direction. Thank you

[velvet remnant]

I'll check after sometime

[velvet remnant]

@zenith heronhttps://scrimba.com/scrim/coc004cd1ab0308dd79f4fbcf

i used fetch because i was not able to use spread oprator if you want to use axios you can change

also if you want to store it in to the array you can do this instead but i would not suggest doing this

you need to use async await

when everytime you request something from api you will get diff data in your array like index positions

here i log the first object in the array and it diff than the first one

[zenith heron]

hey thank you so much. I was about to ask you another question 😅 because I wasn't able to map over the object of objects but I digged around the internet and figured out i needed to use Object.values and now it works! Thanks again, I really appreciate it!