Entendendo e resolvendo o erro no Preact: Uncaught (in promise) Error: Objects are not valid as a child.

Rafael Pinho
1 min readSep 5, 2023

Comecei um pequeno projeto pessoal usando Preact, uma alternativa mais leve ao React e compatível com diversas libs. Após diversas linhas de código, chego ao seguinte código:

const retornoApi: Entrada[] = [
{ Id: 1, Nome: "Entrada 1", DataRegistro: new Date('2023-09-01 00:15:03') },
{ Id: 2, Nome: "Entrada 2", DataRegistro: new Date('2023-09-02 13:00:41') }
]

// Componente...
{retornoApi.map(dado => {
return <p>
Entrada #{dado.Id}: '{dado.Nome}' em {dado.DataRegistro}
</p>;
})}

Ao salvar, o debugger do Preact retorna o seguinte:

Depois de algumas horas batendo cabeça, fui fazer o óbvio e verificar as linhas que retornavam erro primeiro. Neste caso, linha 132.

<span>Data: {dado.DataRegistro}</span>
<!-- Uncaught (in promise) Error: Objects are not valid as a child. -->

Após horas batendo cabeça, reparei que os demais campos eram de tipos primitivos (strings e numbers), e apenas a linha 132 tinha um tipo de referência Date. Então ao adicionar um .toDateString() (ou apenas o .toString()), resolvi o problema.

<span>Data: {dado.DataRegistro.toDateString()}</span>
<!-- Data: Mon Sep 04 2023 -->

Agora é só usar a API Intl ou algum day.js da vida para fazer as devidas conversões. \o/

--

--

Rafael Pinho

Developer in love with development, electronics and coffee. Follow me and try to understand my ideas.