How to render an asynchronous function in reactJS?

Question

My problem is this:

I have an asynchronous function that makes a mysql request and, depending on the result of the request, returns a different DIV.

const GetData = async(idAluno,disciplina) => {
  variavel = await confereInicial(idAluno, disciplina.id);
  //console.log(variavel); imprime direitinho, sem problemas
  
  if(variavel.data.length===0){
    return (
      <DivCheckBox dads = {dados} nomeDisciplina = {disciplina.title} labelDisciplina = {disciplina.label} id = {disciplina.id} inicial = {0}/>
    )}
  else{
    return (
      <DivCheckBox dads = {dados} nomeDisciplina = {disciplina.title} labelDisciplina = {disciplina.label} id = {disciplina.id} inicial = {1}/>
    )
  }

};

And this function is called several times (via a map) in the rendering part of the screen. So:

return (
    <div>
              
              {
              dados.state.nodesPadrao.map( (p) => {
                return (
                <GetData idAluno= {1} disciplina= {p}/>
              )})
              }

...

The problem is that when I compile it appears "Objects are not Valid as React Child (found: Object Promise). If you want to render a Collection of Children, use an array Instead.

What I do?

Answer 1

Have a variable in the state, where you will store the items and create a function to get the data from the Storage, calling it when the component is mounted and render the content from its state variable