How to enable a disabled button in react?-CodePudding

I have button A, button B, and button C. When clicked on button A the button B needs to be enabled and after 5 clicks on button B, button C needs to be enabled.

import React, { useState } from "https://cdn.skypack.dev/[email protected]";
import ReactDOM from "https://cdn.skypack.dev/[email protected]";

function onClick() {}

function Button({ isLocked, children, ...other }) {
    const className = isLocked ? "button button--locked" : "button";
    return (
        <button class={className} disabled={isLocked} {...other}>
            {isLocked ? "Oh no! I'm locked :(" : children}
        </button>
    );
}

function App() {
    const isLocked = true;
    const isLocked2 = true;
    const countdown = 5;

    const unlockSecondButton = () => {
       
    };
    const unlockThirdButton = () => {
       
    };

    return (
        <>
            <Button onClick={unlockSecondButton}>
                I will unlock Second Button on click
            </Button>
            <Button onClick={unlockThirdButton} isLocked={isLocked}>
                I will unlock Third Button after {countdown} clicks
            </Button>
            <Button isLocked={isLocked2}>Yay I'm free! :)</Button>
        </>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

I need to edit the two functions unlockSecondButton and unlockThirdButton but I haven't figured out how.

CodePudding user response：

You need something like this:

 export default function App() {
  const [isLockedB, setIsLockedB] = React.useState(true);
  const [isLockedC, setIsLockedC] = React.useState(true);
  const [counter, setCounter] = React.useState(5);

  const unlockSecondButton = () => {
    setIsLockedB(false);
  };
  const unlockThirdButton = () => {
    if (counter == 0) return;

    setCounter(counter - 1);

    if (counter == 1) {
      setIsLockedC(false);
      return;
    }
  };

  return (
    <>
      <Button onClick={unlockSecondButton}>
        I will unlock Second Button on click
      </Button>
      <Button onClick={unlockThirdButton} isLocked={isLockedB}>
        I will unlock Third Button after {counter} clicks
      </Button>
      <Button isLocked={isLockedC}>Yay I'm free! :)</Button>
    </>
  );
}

CodePudding user response：

2021 New Year Fashion Casual Men's Print Plaid Long Sleeve Button Shirt Blouse Top. Eti best fashion house in Tangail [

Eti best fashion house in Tangail