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

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/