Updating properties after a callback in react - reactjs

Question

I have the following code within Typescript React:
I am trying to set loggingIn = "true" when I get the call back from the component. This would allow the component to show an indicator that its logging in.
What is the best way to approach this?
Thank you in advance,
Marty
Login.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LoginPanel } from "../Shared/LoginPanel.tsx";
let loggingIn: string = "false";
ReactDOM.render(
<LoginPanel loggingIn={ loggingIn } onLogin={
function (email:string, password:string) {
this.loggingIn = "true";
alert("Logging in with e-mail" + email + " and password " + password);
}.bind(this)
} />,
document.getElementById("loginpanel")
)
LoginPanel.tsx
import * as React from "react";
export interface Properties { loggingIn:string; onLogin: (email: string, password: string) => void; }
export class LoginPanel extends React.Component<Properties, {}> {
email: HTMLInputElement = null;
password: HTMLInputElement = null;
submit = (e: any) => {
e.preventDefault();
this.props.onLogin(this.email.value,this.password.value);
};
render() {
return <div className="row">
<div className="col-xs-3">
<h3>Log in with your email account</h3>
<form onSubmit={this.submit}>
<div className="form-group">
{ this.props.loggingIn }
<label htmlFor="email" className="sr-only">Email</label>
<input type="email" ref={(input) => { this.email = input; } } className="form-control" placeholder="somebody#example.com" />
</div>
<div className="form-group">
<label htmlFor="key" className="sr-only">Password</label>
<input type="password" ref={(input) => { this.password = input; } } className="form-control" placeholder="Password" />
</div>
<input type="submit" id="btn-login" className="btn btn-custom btn-lg btn-block" value="Log in" />
</form>
Forgot your password?
<hr />
</div>
</div>
}
}

Answer 1

Your Login.tsx should look like this:
let loggingIn: string = "false";
function onLogin(email: string, password: string) {
loggingIn = "true";
console.log(`logged in. email: ${ email }, password: ${ password }`);
}
ReactDOM.render(
<LoginPanel loggingIn={ loggingIn } onLogin={ onLogin } />, document.getElementById("loginpanel")
)
And the LoginPanel.tsx:
export interface Properties {
loggingIn: string;
onLogin: (email: string, password: string) => void;
}
interface State {
loggingIn: string;
}
export class LoginPanel extends React.Component<Properties, State> {
email: HTMLInputElement = null;
password: HTMLInputElement = null;
constructor(props: Properties) {
super(props);
this.state = {
loggingIn: props.loggingIn
};
}
submit = (e: React.FormEvent) => {
e.preventDefault();
this.props.onLogin(this.email.value, this.password.value);
};
render() {
return <div className="row">
<div className="col-xs-3">
<h3>Log in with your email account</h3>
<form onSubmit={ this.submit }>
<div className="form-group">
{ this.state.loggingIn }
<label htmlFor="email" className="sr-only">Email</label>
<input type="email" ref={(input) => { this.email = input; } } className="form-control" placeholder="somebody#example.com" />
</div>
<div className="form-group">
<label htmlFor="key" className="sr-only">Password</label>
<input type="password" ref={(input) => { this.password = input; } } className="form-control" placeholder="Password" />
</div>
<input type="submit" id="btn-login" className="btn btn-custom btn-lg btn-block" value="Log in" />
</form>
Forgot your password?
<hr />
</div>
</div>
}
}