Objects are not Valid as a React Child (found: [Object Promise]) [REACTJS]

Question

I am making a list of items that has a foreign key (om_id) . When retrieving this list I would like that instead of loading the value om_id, the value of the Name of this OM table.

By rendering my code I’m getting the following error as an answer:

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’m not getting out of this pool hall!

Follow my code:

class ListaInspecao extends Component
{

    constructor()
    {
        super();

        this.state = {
            listaInspecao: [],
            listaInfo: {},
            page: 1,
        }
    }
    

    getOmNome = async (id) =>
    {
        const response = await Api.get(`/om/${id}`);
        return response.data.nome;
 
    }

    componentWillMount()
    {
        console.log("will");
        this.LoadListaInspecao();
    }

    componentDidMount()
    {
               
    }

    LoadListaInspecao = async (page = 1) =>{
        const response = await Api.get(`/inspecao?page=${page}`);

        const{data, ...listaInfo} = response.data;
        
        this.setState({listaInspecao: data, listaInfo, page});

        console.log(data);
        
    }

    render(){
        //console.log(this.state.listaInspecao[0].nome);
        return(
            <React.Fragment>
                <h1>Lista de inspeção</h1>
                
                <div>
                    {
                        this.state.listaInspecao.map(inspecao =>(
                            <article key={inspecao.id}>
                                <strong>{inspecao.numero}</strong>
                                <p>dt_inicio: {inspecao.dt_inicio}</p>
                                <p>dt_fim: {inspecao.dt_fim}</p>
                                <p>Nome: {this.getOmNome(inspecao.om_id)}</p>
                                 {/* <p>Nome: {inspecao.om.sigla}</p>                                 */}
                            </article>
                            )
                        )
                    }
                </div>
            </React.Fragment>
        
        );
    }
}

export default ListaInspecao;

Already I am very grateful for the help!

Answer 1

getOmNome is a function async, this means that your return will be encapsulated within a Promise. To disembowel data from a Promise, you can use the await, but how are you doing it within the method render, this is not feasible, because the render should not be asynchronous.

This approach is not ideal, it would be right to make a setState when you get the answer, just as you are already doing in the LoadListaInspecao, that is to say:

constructor() {
  super();

  this.state = {
    listaInspecao: [],
    listaInfo: {},
    omData: [],
    page: 1,
  }
}

LoadListaInspecao = async (page = 1) => {
  const responseInspecao = await Api.get(`/inspecao?page=${page}`);

  const { data, ...listaInfo } = responseInspecao.data;

  const responseOm = await Promise.all(data.map(d => Api.get(`/om/${d.om_id}`)));

  const omData = responseOm.map(r => r.data);

  this.setState({ listaInspecao: data, listaInfo, omData, page });

}

render() {
  return (
    <React.Fragment>
      <h1>Lista de inspeção</h1>

      <div>
        {
          this.state.listaInspecao.map((inspecao, i) => (
            <article key={inspecao.id}>
              <strong>{inspecao.numero}</strong>
              <p>dt_inicio: {inspecao.dt_inicio}</p>
              <p>dt_fim: {inspecao.dt_fim}</p>
              <p>Nome: {this.state.omData[i].nome}</p>
            </article>
          ))
        }
      </div>
    </React.Fragment>

  );
}