How to render another page onclick - reactjs

Question

I'm using Reactjs. I want to render another page on the same place where main page is render. Below is code for my app.js file.
import React, { Component } from 'react';
import Online from './components/userview';
import Login from './components/login';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.state = { LoggedIn: false };
}
handleLogin(props) {
this.setState = { LoggedIn: true };
console.log(this.setstate.LoggedIn);
}
render() {
return (
<div className="App">
<div className="header col-lg-12">
<img
src={require('../src/images/logo.png')}
style={{ maxWidth: '80vh', maxHeight: '100vh' }}
/>
</div>
<button
type="button"
class="btn btn-primary"
onClick={this.handleLogin}
>
Sign In
</button>
<button type="button" class="btn btn-info">
Join Live chat
</button>
<Login />
</div>
);
}
}
export default App;
and here is the page which I want to render at the place to app.js.
import React, { Component } from 'react';
export default class Login extends Component {
render() {
return (
<div className="login">
<form>
<div>
<label>Your ID:</label>
<input type="text" ref="id" />
</div>
<br />
<br />
<input type="submit" value="submit" />
</form>
</div>
);
}
}
How to render this page when I click on login button?

Answer 1

In your App render method, you can do :
if(this.state.LoggedIn) return <Login />

Answer 2

Add the below code inside the App component's render method.
render(){
if(this.state.LoggedIn)
return <Login />;
else {
return(
<div className="App">
....
</div>
);
}
}
Check the working code on CodeSandbox