React multiple api requests

Question

So as a personal project of mine, I wanted to track all the WSB stonks. Unfortunately the api im using from alpha advantage has you making multiple requests for different symbols(Please correct me if I'm wrong). I was wondering if I can just use one state and map through them in one component, instead of having multiple states for each individual symbols and passing them through the same component multiple times. As you can see from my code below I'm trying to set my gmedata, amcdata, tesladata, and pltrdata to one variable called allstockdata then setStock(allstockData) but its a fail =(

import stockApi from "../apis/stockApi";
import cryptoApi from "../apis/cryptoApi";

const StonkList = () => {
  const [cryptos, setCryptos] = useState([]);
  const [stocks, setStocks] = useState([]);
  const [gme, setGme] = useState([]);
  const [amc, setAmc] = useState([]);
  const [tesla, setTesla] = useState([]);
  const [palantir, setPalantir] = useState([]);

  const fetchData = async () => {
    const cryptoData = await cryptoApi.get("/coins/markets/", {
      params: {
        vs_currency: "usd",
        ids: "bitcoin, dogecoin",
      },
    });
    const gmeData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "GME",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const amcData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "AMC",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const teslaData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "TSLA",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const pltrData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "GME",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const [gmeData, amcData, teslaData, pltrData] = allStockData;
    setCryptos(cryptoData.data);
    setStocks(allStockData.data);
    console.log(cryptoData.data);
    console.log(allStockData.data);
  };

  useEffect(() => {
    fetchData();
  }, []);
  return <div></div>;
};
export default StonkList;

Thanks brotha im such a noob, I knew i was somewhere in the ballpark lmao — HelpANoobOut
– HelpANoobOut, Commented Apr 23, 2021 at 6:52

Sowam · Accepted Answer · 2021-04-23 06:46:13Z

3

Wrong structure, it should be:

const allStockData =  [gmeData, amcData, teslaData, pltrData];

When you do

const [gmeData, amcData, teslaData, pltrData] = allStockData;

It is trying to find gmeData, amcData, teslaData, pltrData values inside allStockData which doesn't exist

You can check example here, just uncomment line and see what error will you get

answered Apr 23, 2021 at 6:46

Sowam

1,7665 gold badges16 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

React multiple api requests

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related