How To Enable Button Based On If statement in ReactJS?

Last Updated : 03 Oct, 2024

React.js is one of the most popular JavaScript libraries for building user interfaces, and one common task is enabling or disabling a button based on certain conditions or user inputs. This is often achieved by using conditional logic such as if statements.

In this article, we'll explore how to enable a button based on an if statement in React.js. We'll break it down step by step and include a practical example to help you understand the process.

Steps To Enable Button Based On If Statement

In order to display the button conditionally using the if and else statements, we can use the state in react.js. Declare the state in the constructor method because it loads first when the component is loaded. In order to toggle between user and admin, we need to use an event handler. Using this event handler, we can toggle the state of the user. Below is the implementation of the code for displaying it.

Setting up Your React Project

Before we dive into the code, make sure you have a React project set up. If you haven't created a project yet, you can do so using create-react-app by following these steps:

npx create-react-app react-gfg
cd react-gfg

Folder Structure

Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example:

JavaScript

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import * as serviceWorker from './serviceWorker';
import Demo from './Demo'


ReactDOM.render(
    <React.StrictMode>
        <Demo />
    </React.StrictMode>,
    document.getElementById('root')
);


// serviceWorker.unregister();

JavaScript

//Demo.js

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