Estoy desarrollando una aplicación sencilla donde no quiero utilizar react con redux.
Manejo la autenticacion con firebase, tengo un componente Header que se ve en todas las rutas donde administro el login y luego paso es usuario al componete Route.
Es aquí donde quiero gestionar el usuario y poder enviárselo a otros componentes pero no logro pasar el User desde Routes al Componente Super_Admin
ya intente <Route path="/administar_cuentas" render={(props) => <SuperAdmin {...props} actualUser={this.actualUser}/>}
pero al intentar leerlo (this.props.actualUser) me responde
SuperAdmin.js:20 Uncaught TypeError: Cannot read property 'actualUser' of undefined
¿como podria pasar props a un componente rendeizado por React Router dentro de un Switch?
adjunto codigo
Router.js
export default class Router extends Component {
state= {
user: null
}
actualUser= this.state.user;
sessionUser = (user) =>{
if(user !=null ){
this.setState({
user: user
});
console.log(user.displayName);
}
}
render() {
return (
<BrowserRouter>
<Header sessionUser={this.sessionUser} />
<Container fluid={false} >
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/administar_cuentas" render={(props) => <SuperAdmin {...props} actualUser={this.actualUser}/>}
/>
</Switch>
</Container>
</BrowserRouter>
);
}
}
SuperAdmin.js
export default class SuperAdmin extends Component {
state= {
user: "",
}
componentWillMount(){
// validar si existe session abierta
}
imprimir(){
console.log(this.props.actualUser);
}
render() {
return (
<Row className="mt-3 ">
<ListaCategorias user={this.state.user} />
<Col sm={7} className="recuadro ml-4">
<h1 className="text-center"> Datos empresas</h1>
<Button onClick={this.imprimir} >Imprimir</Button>
</Col>
<AuthUserContext.Consumer>
{authUser =>
authUser ? <h1>Loguaeado</h1> : <h1>Iniciar Sesion</h1>
}
</AuthUserContext.Consumer>
</Row>
);
}
}
actualUser
deundefined
, o sea quethis.props
esundefined
, esto se debe a quethis
hace parte de otro scope por lo que puedes cambiarla a una arrow function o cambiar tu botón por uno así:<Button onClick={this.imprimir.bind(this)}>Imprimir</Button>
y de esta forma funcionaríabind
dentro de los renders por cuestión de performance. Es mejor usar métodos arrow.