1

mi pregunta el dia de hoy es simple y sencilla. Estoy intentando pasar un dato(en este caso un token) de componente hijo(Login) a componente padre (Home). Lei mucha documentacion, pero aun no encuentro la forma de pasar este dato. desde ya muchas gracias y va el codigo..

Componente HIJO

const Login = (props) => {
const routerHistory = useHistory();

const formFormik = useFormik({

    initialValues: {email: '', password : ''},
    
    validate(){
        const errors = {};

        const email = formFormik.values.email;
        const password =formFormik.values.password;
    
        if(!email) errors.email = "Requerido";
        else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email))
                errors.email = "Ingrese un mail valido";
        if(!password) errors.password = "Requerido";
    
        return errors;
        
    },
    async onSubmit  (values){
        const envioBack =  await api.post('http://localhost:3000/users', values);
        console.log(envioBack);
        const tokenJson = {
            token: ""
        }
        const result = await api.post("http://challenge-react.alkemy.org/", values).then(
            (res)=>{
                sessionStorage.setItem('token',res.data.token);
                localStorage.setItem('token', res.data.token);
                tokenJson.token = res.data.token;
                
            }).catch(
                (err)=>{
                    alert('Verifique Email y password');
                    formFormik.resetForm();
                }
            )

        console.log(tokenJson);
        const envioToken  =  await api.get(`http://localhost:3000/users/${tokenJson.token}`);
        console.log(envioToken)
        if (envioToken.data===true){
            **<Home tokens ={envioToken.data} />**
            routerHistory.push('/home');
        
        }else{
            console.log("Sin autorizacion para este sitio")
        }
    },
})

componente PADRE

const Home = (props) => {
    
console.log(props.tokens)
    return ( <>
    <h1> {props.tokens}</h1>
       
    </>);
}

La salida en pantalla de ese console.log es:

undefined

Quiero que a ese componente llegue el dato que necesito, como es posible hacerlo?

1 respuesta 1

1

Una solucion es pasar una funcion como prop al componente hijo y que el componente hijo llame a esta funcion pasando como argumento el valor que el componente padre necesite. Por ejemplo:

const Home = () => {
    const passToken = (tokens) => {
      console.log(tokens)
    }

    return (
        <>
          <Hijo passToken={passToken} />  
        </>
    );
}


const Hijo = (props) => {
  const obtenerToken = async () => {
     // ... functionalidad
    const tokens = await obtenerToken();

    //aqui se pasa el token al componente padre
    props.passToken(tokens)

  }

  return (
    //... funcionalidad
  )
}

En componente Padre podria guardar el valor recibido por el componente Hijo en su estado si se necesitara.

Otra opcion seria usar algun manejador de estado para React como redux, mobx entre otros, pero para el ejemplo que compartes estaria de mas.

Un link para aprender mas acerca de callbacks: funciones callback

1
  • Hola! gracias por tu respuesta. Entiendo la logica como la aplicas, y estoy intentando hacer lo que me decis, pero no logro enviar la data que necesito al componente PADRE. Cuando le hago un console.log(props) en el componente HIJO me sale : ` {history: {…}, location: {…}, match: {…}, staticContext: undefined}` . Es decir como que no me llegaria la funcion callback. Seguire investigando y graciaS! el 30 dic. 2021 a las 3:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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