-1

I am trying to call an async function using .map() in REACT to populate table data cells. The async function is calling the backend of my application using data from the array that is being iterated through.

The function that is being called returns a number when called properly. This is my first time posting a question so any help is great! If I need to add more information I will.

Thank you.

{tableInfo.map(info => (
      <tr>
        <td key={info.name}>{info.name}</td>
        <td key={info.price}>{info.price}</td>
        <td key={info.amount}>{info.amount}</td>
        <td>
          {async () => await fetchCurrentPrice.getPrice(info.name)}
        </td>
      </tr> ))}
Archer3127
  • 3
  • 1
  • 2
  • Maybe this could help you https://stackoverflow.com/questions/38357234/is-it-possible-to-use-async-await-in-react-js – Camilaebf Nov 29 '21 at 17:39
  • Are you really trying to make one http request per row of your table? Don't. – Bergi Nov 29 '21 at 19:20

2 Answers2

3

async functions always return promises. You can't fetch data asynchronously during rendering.

You need a useEffect hook to run the function which gathers the data, and then a useState hook to store it, along with logic to show a loading state while you wait for it.

const MyRow = ({ info }) => {
   const [currentPrice, setCurrentPrice] = useState(null);

   useEffect(() => {
       fetchCurrentPrice.getPrice(info.name).then(setCurrentPrice);
   }, [info]);

   return <tr>
        <td key={info.name}>{info.name}</td>
        <td key={info.price}>{info.price}</td>
        <td key={info.amount}>{info.amount}</td>
        <td>{currentPrice ?? <Loading />}</td>
   </tr>

}

with

{tableInfo.map(info => <MyRow key={info.name} info={info} />)}
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thank you very much. I was not aware that you couldn't fetch data asynchronously during rendering. – Archer3127 Nov 29 '21 at 17:47
  • This worked perfectly. Thank you again. I can't upvote because I am still too new, but this helped so much. – Archer3127 Nov 29 '21 at 18:28
  • @Archer3127 — Glad it worked for you. You can't up vote yet, but you can [accept an answer](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) to show that it solved your problem. – Quentin Nov 29 '21 at 20:52
-1

Use a separate component for the tr tag and call it within it.

const Component = (props) => {
  const {info} = props
  
  useEffect(() => {
    // call your api and set it to state
  }, [])
  
  return <tr>
        <td key={info.name}>{info.name}</td>
        <td key={info.price}>{info.price}</td>
        <td key={info.amount}>{info.amount}</td>
        <td>
          {async () => await fetchCurrentPrice.getPrice(info.name)}
        </td>
      </tr>
}

{tableInfo.map(info => <Component info={info} />)}
Emran
  • 124
  • 4