0

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;
1
  • 2
    ¿Haz intentado usar setDatos en vez de this.setState? Saludos
    – g.4
    el 5 jun. 2021 a las 15:09

1 respuesta 1

0

Estás usando un componente funcional y no un componente de clase.

En componentes de clase tienes acceso a las propiedades con el this, en tu caso, las funciones (noResponse, responseGoogle) son variables locales de la función Home. Por lo tanto, no hace falta el uso del this.

Deberías cambiar tu código así, invocar a la funciones locales sin el this porque son variables locales de la función.

<GoogleLogin
      clientId="128507741231-f29fn3id10e5erer4.apps.googleusercontent.com"
      buttonText="Iniciar Sesion"
      onSuccess={(response) => {
        responseGoogle(response);                //Función de donde obtengo los datos
      }}
      onFailure={(response) => {
        noResponse(response);
      }}
      cookiePolicy={"single_host_origin"}
    />

Tipos de componentes en react

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.