<div id="app"></div>

button{
  background:black;
  padding:10px;
  color:gold;
  font-size:18px;
}

div{
  margin:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

class Welcome extends React.Component{

    render(){
        return <h1>Welcome to react world</h1>
    }
}


class Login extends React.Component {

     state= {
         isLogin : false
     }

 handleLogin = ()=>{
     this.setState({
         isLogin : !this.state.isLogin
     })
 }

   render(){
       return (
           <div>
            {this.state.isLogin && <Welcome />}
                  <button onClick={this.handleLogin}>{this.state.isLogin ? "Logout":"Login"} </button>

           </div>
       )
   }

}
ReactDOM.render(<Login/>,document.querySelector('#app'))