My header.jsx file contains the following code:
// Default Import Statements
var Login = require(login.jsx)
const HeaderComponent = React.createClass({
getInitialState () {
return {
loggedIn: false,
};
},
render() {
return (
<Toolbar>
<ToolbarGroup key={1} float="right">
<Login />
</ToolbarGroup>
</Toolbar>
);
}
});
module.exports = HeaderComponent;
The Login Component (login.jsx) looks like this:
// Default Import Statements
var LoginDialog = React.createClass({
render() {
return (
<div>
<Dialog
title="Login"
ref="loginDialog"
autoScrollBodyContent = {true}
onRequestClose={this._cancelTouchTap}
open={this.state.open}>
<form action="/login" method="post" autoComplete="off">
<div>
<TextField hintText="Email Field" ref = "email" />
</div>
<div>
<TextField hintText="Password" type="password" ref = "password"/>
</div>
<div>
<RaisedButton label="Submit" onTouchTap={this._submitTouchTap}/>
<RaisedButton label="Cancel" onTouchTap={this._cancelTouchTap}/>
</div>
</form>
</Dialog>
<FlatButton label="Login" style={loginSpacing} primary={true} onTouchTap={this._handleTouchTap} />
</div>
);
},
_submitTouchTap: function(){
var primaryEmail = this.refs.email.getValue();
var password = this.refs.password.getValue();
var data = {
primaryEmail: primaryEmail,
password: password
};
$.ajax({
url: '/login',
dataType: 'json',
type: 'post',
data: data,
success: function(data) {
console.log(data);
}.bind(this),
error: function(xhr, status, err) {
this.transitionTo('/login');
}.bind(this)
});
this.refs.loginDialog.setState({open: false});
},
_cancelTouchTap: function(){
this.refs.loginDialog.setState({open: false});
},
_handleTouchTap() {
this.refs.loginDialog.setState({open: true});
}
});
module.exports = LoginDialog;
I am looking to update the header's loggedIn state to true once the ajax call returns success when a user logs in. How can I pass data from the child login.jsx file to the parent header.jsx file to achieve a Dynamic UI for the header?
Once a user is logged in, the state of loggedIn in the header component should change to true, triggering the display of a different header than the current one.