My first api request always fails after page load

I’m having a problem with my API request that always fails after page load. Don’t really know where Im wrong.

Here’s my request and I call it when I interact with handleOpen function.

  const stock = {
    method: 'GET',
    url: 'https://morningstar1.p.rapidapi.com/live-stocks/GetRawRealtimeFigures',
    params: {Mic: props.mic, Ticker: clickedElement.ticker},
    headers: {
      'x-rapidapi-key': 'XXX',
      'x-rapidapi-host': 'morningstar1.p.rapidapi.com'
    }
  }

  const getStock = async () => {
    try {
      const res = await axios.request(stock);
        return res.data;
    }
    catch (error) {
      setOpen(false);
      console.error("catch api error: ", error);
    }
  }

  const handleOpen = name => {
    
    let findClickedStock = props.stocksArray.find(item => item.ticker === name)
    setClickedElement(findClickedStock)

    getStock().then((dataFromStockApi) => {
      let combined1 = { ...dataFromStockApi, ...findClickedStock }
      setStockObject(combined1);

    });
    setOpen(true);
  };

ERROR:

Answer

It’s because your Ticker parameter is empty.

When you create “stock”, clickedElement.ticker is undefined.

Do this:

    // pass name in as a parameter
    getStock(name).then(...)

Make getStock like like this:

  const getStock = async (ticker) => {
    try {
      const res = await axios.request({
         method: 'GET',
         url: 'https://morningstar1.p.rapidapi.com/live-stocks/GetRawRealtimeFigures',
         params: {Mic: props.mic, Ticker: ticker},
         headers: {
           'x-rapidapi-key': 'XXX',
           'x-rapidapi-host': 'morningstar1.p.rapidapi.com'
         }
      });

      return res.data;
    }
    catch (error) {
      setOpen(false);
      console.error("catch api error: ", error);
    }
  }