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/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
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.
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>
</>
);
}