How can I use a Promise in React props?

Question

I am getting data from the server and I want to change the number data to a string. sub code like

{
    title: 'stage',
    dataIndex: 'stage',
    render:  (text, record, index) => {
        return (
            <Tag> {getBookItem(TASK_STAGE, text)} </Tag>
        );
    },
} 
const getBookItem = async (key, text) => {
var data = await getSysData();
var str = '';
data[key].forEach((element) => {
    if (element.id == text) {
        str = element.value;
    }
});
return str;}
const getSysData = async () => {
return await markBook()};

the function getBookItem returns a 'Promise', so I get an error like

 Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

I can‘t make this function not async, because I use axios to get data. And I can't use Prmoise in react props, so How can I change this data

You should read https://beta.reactjs.org/apis/react/useEffect#fetching-data-with-effects on how to fetch data asynchronously in react. — evolutionxbox, Oct 14 '22 at 13:14
Welcome to SO. It's a little difficult to work out what your props object is doing and how it's used. [Here's some documentation on how to create a React snippet](https://meta.stackoverflow.com/a/338538/1377002) which may make your question easier to understand. — Andy, Oct 14 '22 at 13:14
Does this answer your question? [Using async/await inside a React functional component](https://stackoverflow.com/questions/57847626/using-async-await-inside-a-react-functional-component) — evolutionxbox, Oct 14 '22 at 13:14

score 1 · Answer 1 · answered Oct 14 '22 at 13:59

You can not render an async function directly in the JSX because it returns a promise. You should store the returned value in a variable and try to render it. I am sharing an example code block for you. Please try to discover your mistake by comparing.

import React from 'react';

export default function App() {

  const [first, second] = [2, 4];
  let result;
  const sum = async (a, b) => (result = a + b);

  sum(first, second); // call the function somewhere you need, (usually in useEffect)

  return (
    <div>{result}</div> {/*  renders 6  */}
  );
}

I agree. Only thing I would change is storing the result in state, otherwise it will disappear when the component is re-rendered. — ferrouskid, Oct 14 '22 at 14:45

How can I use a Promise in React props?

1 Answers1