Question

0

237

Views

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

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.

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T08:53:59.516Z

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.

Answer 2 · 2022-07-05T08:53:59.524Z

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>
  );
}

Answer 3 · 2022-07-05T08:53:59.532Z

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

0

237

disable another button on react js

3 answers

0

0

0

Find remote jobs

Andres GPT