Tengo el botón A, el botón B y el botón C. Cuando se hace clic en el botón A, el botón B debe estar habilitado y después de 5 clics en el botón B, el botón C debe estar habilitado.
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"));Necesito editar las dos funciones unlockSecondButton y unlockThirdButton pero no he descubierto cómo.
Necesitas algo como esto:
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> </> ); }