Working on my first react project and not making any progress on how to loop through and render my data to the front-end.

I am using axios to get a list of stock tickers from a MySQL database, and for each of those i am once again using axios to scrape some values from an external website.

See code snippet below:

const fetchStocks = () => {
    let stocksList = []

    Axios.get('http://localhost:3001/fetchStocks').then((response) => {
        response.data.map((val, key) => {

            const url = 'https://www.tradegate.de/orderbuch.php?isin='   val.stockTicker
            Axios.get(url).then((response) => {

                let $ = cheerio.load(response.data)
                let name = $('#col1_content h2')[0].children[0].data
                let last = $('#last')[0].children[0].data
                let delta = $('#delta')[0].children[0].data
                let high = $('#high')[0].children[0].data
                let low = $('#low')[0].children[0].data

                stocksList.push({
                    sId: val.sId,
                    stockName: name,
                    stockTicker: val.stockTicker,
                    stockLast: last,
                    stockDelta: delta,
                    stockHigh: high,
                    stockLow: low
                })
            })
        })
    })
}

When i do console.log(stocksList) i pretty much get what i want:

[
{
        "sId": 3,
        "stockName": "Tesla Inc.",
        "stockTicker": "US88160R1014",
        "stockLast": "1 049,80",
        "stockDelta": " 8,90%",
        "stockHigh": "1 049,80",
        "stockLow": "966,90"
    },
    {
        "sId": 1,
        "stockName": "Apple Inc.",
        "stockTicker": "US0378331005",
        "stockLast": "128,00",
        "stockDelta": "-1,16%",
        "stockHigh": "130,28",
        "stockLow": "127,70"
    },
    {
        "sId": 2,
        "stockName": "Intel Corp.",
        "stockTicker": "US4581401001",
        "stockLast": "42,725",
        "stockDelta": " 0,78%",
        "stockHigh": "42,85",
        "stockLow": "42,37"
    }
]

I would now like to do something like:

{
    stocksList.map(stock => {
        return ( 
            <li key = {stock.sId}>{stock.stockName}</li>
        )
    })
}

for each entry in the database, but so far i had no luck and don't quite understand where i'm wrong - im guessing something about how i'm setting up the array?

CodePudding user response：

Since your are returning JSX you may want to use () braces instead of {}.

{
    stocksList.map(stock => (
        return ( 
            <li key = {stock.sId}>{stock.stockName}</li>
        )
    ))
}

Or simply:

{
    stocksList.map(stock => <li key = {stock.sId}>{stock.stockName}</li>)
}

P.S. also I don't see a part of your code where you are trying to render an array

CodePudding user response：

When the component did mount, useEffect will be called then it calls fetchStocks function, finally fetch data from the server and puts at a component state via useState

import React, { useState, useEffect } from 'react';

const FC = () => {
  const [stocksList, setStocksList] = useState([])

  const fetchStocks = () => {
      let list = []

      Axios.get('http://localhost:3001/fetchStocks').then((response) => {
          response.data.map((val, key) => {

              const url = 'https://www.tradegate.de/orderbuch.php?isin='   val.stockTicker
              Axios.get(url).then((response) => {

                  let $ = cheerio.load(response.data)
                  let name = $('#col1_content h2')[0].children[0].data
                  let last = $('#last')[0].children[0].data
                  let delta = $('#delta')[0].children[0].data
                  let high = $('#high')[0].children[0].data
                  let low = $('#low')[0].children[0].data

                  list.push({
                      sId: val.sId,
                      stockName: name,
                      stockTicker: val.stockTicker,
                      stockLast: last,
                      stockDelta: delta,
                      stockHigh: high,
                      stockLow: low
                  })
              })
          })
      })

      setStocksList(list)
  }

  useEffect(() => {
    fetchStocks()
  }, [])


  return stocksList.map(stock => <li key = {stock.sId}>{stock.stockName}</li>)
}