Calling async method in React functional component

Question

I have a question about a good way to solve this problem I have in React. I need to gather currencies from my own API that I've created, that works perfectly and I iterate it in my return statement of the React component. When iterating, I want to use the "item.pairs" data to use as an argument for a method call (async method) to get price information and render it. How can this be accomplished?

I added a method getCurrencyData, I tried calling that in the return statement inside the loop, but it will not work, and I have searched for this and it's not possible to do that in that way. So how can I do this?

The used code is below:

const Start = () => {
    let match = useRouteMatch()
    const [currencies, setCurrencies] = useState([])
    const [currencyPrices, setCurrencyPrices] = useState([])

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

    const getCurrencyData = async (ticker) => {
        try {
            const response = await KrakenService.getByTicker(ticker)
            return Object.values(response.data.result)[0].c[0]
        } catch (err) {
            console.log(err)
        }
    }

    const getAllCurrencies = async () => {
        try {
            const response = await CryptoCurrencyService.getAll()
            setCurrencies(response.data.results)
        } catch (err) {
            console.log(err)
        }
    }

    return(
        <div className='Start'>
            <Switch>
                <Route path={`${match.path}/:currencyId`}>
                    test
                </Route>
                <Route path={match.path}>

                <Container className="cc-container">
                    <Row>
                        <Table hover className="cc-table">
                        <thead>
                            <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>24h %</th>
                            <th>7d %</th>
                            <th>Market Cap</th>
                            <th>Volume (24h)</th>
                            <th>Circulating Supply</th>
                            <th>Last 30 Days</th>
                            </tr>
                        </thead>

                        {currencies &&
                            currencies.map((item, index) =>
                                <tbody>
                                    <tr>
                                        <td>{index + 1}</td>
                                        <td><Image src={item.logo} width="38" roundedCircle /> {item.name}</td>
                                        <td>{item.pairs}</td> HERE I WANT TO FETCH DATA
                                    </tr>
                                </tbody>
                            )
                        }
                        </Table>
                    </Row>
                </Container>     
                
                </Route>
            </Switch>
        </div>
    )
}

export default Start

Answer 1

Maybe create component for Price information?

// PriceInformation component
const PriceInformation = ({ ticker }) => {
  const [priceInfo, setPriceInfo] = useState(null)
  
  useEffect(() => {
    getCurrencyData(ticker)
  }, [])

  const getCurrencyData = async (ticker) => {
    try {
      const response = await KrakenService.getByTicker(ticker)
      setPriceInfo(Object.values(response.data.result)[0].c[0]);
      // return Object.values(response.data.result)[0].c[0]
    } catch (err) {
      console.log(err)
    }
  }

  return (
    // your code for ui
  )
}

// Start component
const Start = () => {
  // code ...
  return (
    <div className='Start'>
            <Switch>
                <Route path={`${match.path}/:currencyId`}>
                    test
                </Route>
                <Route path={match.path}>

                <Container className="cc-container">
                    <Row>
                        <Table hover className="cc-table">
                        <thead>
                            <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>24h %</th>
                            <th>7d %</th>
                            <th>Market Cap</th>
                            <th>Volume (24h)</th>
                            <th>Circulating Supply</th>
                            <th>Last 30 Days</th>
                            </tr>
                        </thead>

                        {currencies &&
                            currencies.map((item, index) =>
                                <tbody>
                                    <tr>
                                        <td>{index + 1}</td>
                                        <td><Image src={item.logo} width="38" roundedCircle /> {item.name}</td>
                                         
                                        { /* <td>{item.pairs}</td> HERE I WANT TO FETCH DATA */ }
                                        <td><PriceInformation ticker={item.pairs}/></td>
                                    </tr>
                                </tbody>
                            )
                        }
                        </Table>
                    </Row>
                </Container>     
                
                </Route>
            </Switch>
        </div>
   
  )
}