import React, { Component } from "react";

export class CondtionalRender extends Component {
    state = {
        shouldRenderComponent: false
    };

    handleClick() {
        this.setState({ shouldRenderComponent: true });
    }

    render() {
        let conditionallyRenderedComponent;

        if (this.state.shouldRenderComponent === true) {
            conditionallyRenderedComponent = <p> Hello World! </p>;
        } else {
            conditionallyRenderedComponent = null;
        }

        return (
            <div>
                <h1> Title </h1>
                <button onClick={this.handleClick}> Show Component </button>
                {conditionallyRenderedComponent}
            </div>
        );
    }
}