0

Tengo problemas para transferir información de la respuesta que da el login de google, la cual la veo perfectamente en la consola del navegador, lo que yo busco es mandarlos al dom para verlos en una lista pero estoy bastante perdido con esto. He visto en tutoriales el uso de hooks o useState para esta labor, pero yo tengo el componente definido como una clase y no puedo usar estas herramientas, entiendo que debería ser algo sencillo de hacer pero no logro ver por donde comenzar, alguna ayuda? muchas gracias !

Home.js

         import React, { Component } from 'react';
         import GoogleLogin from 'react-google-login';


         const responseGoogle = (response) => {

         console.log(response.profileObj.name);  //Datos del user en consola
         console.log(response.profileObj.email);
         console.log(response.profileObj.imageUrl);
        }  

      export class Home extends Component {

     render() {      
    
       return (
        <div className="container">
          <div className = "float-right">
       <GoogleLogin                                         //Boton Login
                  clientId="128507741231-f29fn3id10e5nho6448grr8t44r4.apps.googleusercontent.com"
                  buttonText="Iniciar Sesion"
                  onSuccess={responseGoogle}
                  onFailure={responseGoogle}
                  cookiePolicy={'single_host_origin'} />
          </div>
          <br /><br /><br />
          <div>
              <div><h1></h1></div>
              <ul class="list-group list-group-flush">
                  <li class="list-group-item">Nombre:</li>       //Nombre
                  <li class="list-group-item">Correo:</li>       //Email
                  <li class="list-group-item">Foto: <img src= "" alt=""/></li> //Imagen
              </ul>
          </div>    
      </div>
          )
          }
    }
1
  • 1
    tienes que importar el useState... Yo pondría la clase de responseGoogle dentro de la clase Home, y cambiar el state con los datos, y faltaría poner los datos que recoges del state: es.reactjs.org/docs/hooks-state.html aquí tienes un ejemplo básico
    – Zander
    el 31 may. 2021 a las 10:54

1 respuesta 1

1

Si no estás usando Hooks, sino con clases, debes hacer uso del state.

import React, { Component } from 'react';
import GoogleLogin from 'react-google-login';

export class Home extends Component {
    constructor(props) {
        this.state = {
            nombre: '',
            email: '',
            imagen: ''
        }
    }
    responseGoogle = (response) => {
        // Capturar si es success o failure
        this.setState({
            nombre: response.profileObj.name,
            email: response.profileObj.email,
            image: response.profileObj.imageUrl
        })
    }
    render() {
        return (
            <div className="container">
                <div className="float-right">
                    <GoogleLogin
                        clientId="128507741231-f29fn3id10e5nho6448grr8t44r4.apps.googleusercontent.com"
                        buttonText="Iniciar Sesion"
                        onSuccess={(response) => {
                            this.responseGoogle(response)
                        }}
                        onFailure={(response) => {
                            this.responseGoogle(response)
                        }}
                        cookiePolicy={'single_host_origin'} />
                </div>
                <br /><br /><br />
                <div>
                    <div>
                        <h1></h1>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Nombre: {this.state.nombre}</li> //Nombre
                        <li class="list-group-item">Correo: {this.state.email}</li> //Email
                        <li class="list-group-item">Foto: <img src="{this.state.imagen}" alt="" /></li> //Imagen
                    </ul>
                </div>
            </div>
        )
    }
}

Con esto, cuando se actualice el state, se actualizará el render con los datos que usen el state.

No lo he probado, pero algo así debería funcionar.

1
  • Muchas gracias Zender, me has ayudado mucho !
    – Carlos
    el 31 may. 2021 a las 13:23

Tu Respuesta

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

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