State doesn't update when props changes - reactjs

Question

i was learning react from 'React docs' for few days and today i got into the trouble. Link to docs: https://reactjs.org/docs/conditional-rendering.html#element-variables.
Exercise is that when the button clicks text will change. In docs, they did it with functions and it works perfectly but i tried it with classes.
The problem is that state doesn't update when props changes, it only have its initial value. I'm struggling with it since 2 hours and didn't find the solution. I'm new to React so please be forbearance.
Code:
class UserGreeting extends React.Component {
render() {
return (
<h1>Welcome back!</h1>
);
}
}
class GuestGreeting extends React.Component {
render() {
return (
<h1>Please sign up!</h1>
);
}
}
class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = {isLoggedIn: this.props.isLoggedIn};
}
render() {
let isLoggedIn = this.state.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
}
class LoginButton extends React.Component {
constructor(props) {
super(props);
this.state = {onClick: this.props.onClick};
}
render() {
return (
<button onClick={this.state.onClick}>Login</button>
);
}
}
class LogoutButton extends React.Component {
constructor(props) {
super(props);
this.state = {onClick: this.props.onClick};
}
render() {
return (
<button onClick={this.state.onClick}>Logout</button>
);
}
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.state = {isLoggedIn: true};
}
handleLoginClick = () => {
this.setState({isLoggedIn: true});
}
handleLogoutClick = () => {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

You are storing your answer in the state in the Greeting component inside the constructor. The constructor will only be called once at mount component.
Change your Greeting component with below code**
class Greeting extends React.Component {
render() {
let isLoggedIn = this.props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
}