estoy intentando hacer una pwa con typescript, ionic, react y firebase (por puro aburrimiento), y estoy intentando imprimir el nombre de un usuario (que está en la base de datos), el nombre es asíncrono, en mi caso tarda 3s en imprimir el nombre en consola, pero no lo imprime en la pagina y tira este error "Warning: Functions are not valid as a React child". Lo que intento hacer es que en un archivo donde estan todas las funciones relacionadas a la interacción con la base de datos hay una función que retorna el nombre del usuario.
(./firebaseConfig.ts)
export async function getUsername() {
console.log(sessionName.name)
return `${sessionName.name}`
}
a esta función la importo desde otro archivo de react. Cuando la llamo (de esta forma)
(./pages/Index.tsx)
import React, { useState, useEffect } from "react";
import { getUsername } from "../firebaseConfig";
export const Index: React.FC = () => {
const [username, setUsername] = useState("");
useEffect(() => {
getUsername().then(username => setUsername(username))
}, []);
return(
<h3>Welcome {getUsername} </h3>
)
}
Antes de que cargue me lanza el error, luego de 3s de que cargo la pagina se imprime en consola el nombre
Que debería hacer?
Muchas gracias.
getUsername
)async
si no utilizasawait
dentro de ella? Tambien como es una funcion tienes que ejecutar dicha function con los parentesis.{getUsername()}
<h3>Welcome {username} </h3>
no{getUsername}
getUsername()
sessionName.name
tiene valor?