estoy iniciándome en react y no se como hacer para mostrar unos valores (nombre,correo,foto) utilizando useState, tengo un botón (login google) y quiero que cuando un usuario se autentifique, mostrar unos datos en una lista.
Lo que hice fue declarar un estado con los variables que quiero mostrar, y dentro de la función de respuesta de google asignar los valores que obtengo a las variables, para después pasarlas a la lista y mostrar en pantalla, pero no hay caso, estoy un poco perdido con hooks... alguna ayuda?
import React, { Component, useState, useEffect } from "react";
import GoogleLogin from "react-google-login";
function Home() {
const [datos, setDatos] = useState([ //Declaro estado
{
name: "",
email: "",
image: "",
},
]);
const responseGoogle = (response) => {
this.setState({ //NO FUNCIONA
name: response.profileObj.name,
email: response.profileObj.email,
image: response.profileObj.imageUrl,
});
};
const noResponse = (response) => {
this.setState({
name: " no identificado",
email: " no identificado",
image: null,
});
};
return (
<div>
<h1>Autenticaciones</h1>
<GoogleLogin
clientId="128507741231-f29fn3id10e5erer4.apps.googleusercontent.com"
buttonText="Iniciar Sesion"
onSuccess={(response) => {
this.responseGoogle(response); //Función de donde obtengo los datos
}}
onFailure={(response) => {
this.noResponse(response);
}}
cookiePolicy={"single_host_origin"}
/>
<div>
<ul className="list-group list-group-flush">
<li className="list-group-item">Nombre:</li> //MOSTRAR NOMBRE
<li className="list-group-item">Correo:</li> //MOSTRAR CORREO
<li className="list-group-item"> //CARGAR IMAGEN
Foto: <img src="" alt="" />
</li>
</ul>
</div>
</div>
);
}
export default Home;
setDatos
en vez dethis.setState
? Saludos