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?