disable another button on react js

I have a React project which has three buttons in it. When I click a button, For example I click the second button, it will log "this is from button two ". followed by a random number with time interval 500ms. My aim is when I click a button, another buttons will be disabled, how to do this? Thanks in advance.

This is my App.js

import './App.css';
import { Button1 } from './Button1.React';
import { Button2 } from './Button2.React';
import { Button3 } from './Button3.React';

function App() {
  
    return (
      <div className="App">
        <Button1>log one</Button1>
        <Button2>log two</Button2>
        <Button3>log three</Button3>
      </div>
    );
  
  
}

export default App;

this is my Button1.React.jsx

import React from "react";

export const Button1 = ({
    children,
    type,
    doStuff1 = ()=> {
        console.log("this is button one ", Math.random().toFixed(1));
        setTimeout(doStuff1, 500);
      },
})=>{
    return (
        <button onClick={doStuff1} type={type}>
        {children}
        </button>
    )
};

this is my Button2.React.jsx

import React from "react";

export const Button2 = ({
    children,
    type,
    doStuff2 = ()=> {
        console.log("this is button two ", Math.random().toFixed(1));
        setTimeout(doStuff2, 500);
      }
})=>{
    return (
        <button onClick={doStuff2}type={type}>
        {children}
        </button>
    )
};

this is my Button3.React.jsx

import React, { Children } from "react";

export const Button3 = ({
    children,
    type,
    doStuff3 = ()=> {
        console.log("this is button three ", Math.random().toFixed(1));
        setTimeout(doStuff3, 500);
      }
})=>{
    return (
        <button onClick={doStuff3}type={type}>
            {children}
        </button>
    )
};

and here's the screenshot from the rendered page enter image description here

i've been told to do this is using useState that returns a boolean condition to disable/enable click, but i don't know how to do this.

3 answers

  • answered 2022-01-13 05:29 jove0610

    function App() {
        const [bool1, setBool1] = useState(false);
        const [bool2, setBool2] = useState(false);
    
        const onClickBtn1 = () => {
        // your other codes when btn 1 is clicked
        // ------
        setBool2(true); //disable button 2
        }
    
        const onClickBtn2 = () => {
        // your codes when btn 2 is clicked
        // ------
        setBool1(true); //disable button 1
        }
    
        return (
          <div className="App">
            <button onClick={onClickBtn1} disabled={bool1}>Button 1</button>
            <button onClick={onClickBtn2} disabled={bool2}>Button 2</button>
          </div>
        );
    }
    

    Basically, you use disabled in the button element, the value of the disabled should be in the state so the app will re-render if its value changes. Finally, change the value of the state on the button's onClick handler. You need to learn to use React Hooks for this since you said you don't know useState.

  • answered 2022-01-13 05:32 Vishnu Sajeev

    Is this what you try to do

    import React, { useState } from "react";
    
    const Button = ({ children, type, disabled, doStuff }) => {
      return (
        <button onClick={doStuff} type={type} disabled={disabled}>
          {children}
        </button>
      );
    };
    
    export default function Name() {
      const [activeButton, setActiveButton] = useState();
    
      const disableOtherButtons = (currentButton) => {
        if (activeButton === currentButton) {
          setActiveButton()
        } else {
          setActiveButton(currentButton)
        }
      }
    
      const doStuff1 = () => {
        console.log("this is button one ", Math.random().toFixed(1));
        disableOtherButtons('button1');
      };
      const doStuff2 = () => {
        console.log("this is button one ", Math.random().toFixed(1));
        disableOtherButtons("button2");
      };
      const doStuff3 = () => {
        console.log("this is button one ", Math.random().toFixed(1));
        disableOtherButtons("button3");
      };
    
      return (
        <div>
          <Button
            doStuff={doStuff1}
            disabled={activeButton && activeButton !== "button1"}
          >
            Button1
          </Button>
          <Button
            doStuff={doStuff2}
            disabled={activeButton && activeButton !== "button2"}
          >
            Button2
          </Button>
          <Button
            doStuff={doStuff3}
            disabled={activeButton && activeButton !== "button3"}
          >
            Button2
          </Button>
        </div>
      );
    }
    

  • answered 2022-01-13 05:37 monkeyinsight

    You can pass reference useState to buttons

    import { useRef } from 'react';
    import './App.css';
    import { Button1 } from './Button1.React';
    import { Button2 } from './Button2.React';
    import { Button3 } from './Button3.React';
    
    function App() {
        const [ btn1, setBtn1 ] = useState(false) // by default disabled will be set to false
        const [ btn2, setBtn3 ] = useState(false)
        const [ btn3, setBtn3 ] = useState(false)
    
        const actions = [ setBtn1, setBtn2, setBtn3 ]
      
        return (
          <div className="App">
            <Button1 actions={actions} disabled={btn1}>log one</Button1>
            <Button2 actions={actions} disabled={btn2}>log two</Button2>
            <Button3 actions={actions} disabled={btn3}>log three</Button3>
          </div>
        );
    }
    
    export default App;
    

    and for buttons you need to accept those parameters and work with them

    import React from "react";
    
    export const Button1 = (props) => {
        const { children, type, actions, disabled } = props
    
        const doStuff = () => {
             actions[0](false); // this will set Button1 to disabled
             console.log("this is button three ", Math.random().toFixed(1));
             setTimeout(doStuff3, 500);
        }
    
        return (
           <button onClick={doStuff} type={type} disabled={disabled}>
              {children}
           </button>
        )
    };
    

    I can see you do setTimeout(doStuff3, 500); inside of function that is referencing undefined function, you might want to define those in App.js and pass those as props to buttons

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum