¿Cómo habilitar el botón basado en la declaración If en React.js?

Para mostrar el botón de forma condicional usando la instrucción if y else, podemos usar state en react.js. Declare el estado en el método constructor porque se carga primero cuando se carga el componente. Para alternar entre usuario y administrador, necesitamos usar un controlador de eventos. Usando este controlador de eventos, podemos alternar el estado del usuario. A continuación se muestra la implementación del código para mostrarlo.
 

Ejemplo: 

• demostración.js: 

  JavaScript

  import React, {Component} from 'react'    class DemoUser extends Component {       constructor(){      super()      this.state = {       isAdmin: true      }         this.toggleState = this.toggleState.bind(this);    }          toggleState() {    this.setState ({     isAdmin:!this.state.isAdmin }    )   }                 render(){     if(this.state.isAdmin){       return(       <div>       <h3> Welcome Admin </h3><span >        Is the user admin :        {this.state.isAdmin.toString()}</span>        <br/>       <button  onClick={this.toggleState}>         Toggle between user and admin       </button>           </div>       )       }     else{       return(       <div>       <h3> Welcome User </h3><span >        Is the user admin :         {this.state.isAdmin.toString()}</span>        <br/>       <button  onClick={this.toggleState}>         Toggle between user and admin       </button>           </div>       )               }          }  }     export default DemoUser

• índice.js:

  JavaScript

  import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import DemoUser from './demo'       ReactDOM.render(   <React.StrictMode>     <DemoUser />   </React.StrictMode>,   document.getElementById('root') );       serviceWorker.unregister();

Producción: