I'm new to reactjs and I have been trying to do a simple task of using a link to display a new component. I have a login component which has a Sign up
link. I want the SignUp
component I have written, to be displayed when I click the Sign up
link (See code below).
let LoginForm = React.createClass({
componentDidMount() {
socket.on('loginError', this.loginError);
},
loginError: function () {
this.setState({error: <div className="alert alert-danger">Wrong email or password</div>});
},
logOut: function () {
socket.emit('logout');
},
emitLogin: function () {
socket.emit('login', {
email: this.refs.email.value,
password: this.refs.password.value
});
},
getInitialState(){
return {error: ''}
},
render: function () {
return <div className="container" id="form-signin">
<form onSubmit={this.logOut}>
<h2>Sign In</h2>
{this.state.error}
<div className="form-group">
<label htmlFor="email" className="sr-only">Email address</label>
<div className="input-group">
<div className="input-group-addon"><i className="glyphicon glyphicon-envelope"/></div>
<input type="email" className="form-control" id="email" ref="email"
defaultValue={this.props.defaultEmail} placeholder="Email"/>
</div>
</div>
<div className="form-group">
<label htmlFor="password" className="sr-only">Password</label>
<div className="input-group">
<div className="input-group-addon"><i className="glyphicon glyphicon-lock"/></div>
<input type="password" className="form-control" id="password" ref="password"
placeholder="Password"/>
</div>
</div>
<button type="button" className="btn btn-lg btn-success btn-block" onClick={this.emitLogin}>Sign In
</button>
<a href="">Sign up</a>
</form>
</div>
}
});
I would really appreciate some help. Thanks