Necesito crear los botones que cambiarán entre cada componente, mientras uno se muestra, el resto debe estar oculto, ¿cómo puedo hacer eso con el clic de los botones?
import Step1 from './steps/Step1' import Step2 from './steps/Step2' import Step3 from './steps/Step3' import Step4 from './steps/Step4' const Activation = () => { return ( <div className='modal-steps'> <Step1 /> <Step2 /> <Step3 /> <Step4 /> </div> <div className='modal-activation'> <button className='next-step'> Next </button> <button className='return'> Return </button> </div> ) }Por ejemplo, el paso 1 será el valor predeterminado que se mostrará, haré clic en el botón siguiente, el paso 1 estará deshabilitado, el paso 2 lo mostrará y así sucesivamente. Y si hace clic en el botón Atrás, el paso actual cambiará para ocultarse y se mostrará el anterior.
He estado tratando de hacer esto durante unos días, pero realmente no he llegado a ningún lado...
Pruebe mi código a continuación, responda si mi código funciona o no. Gracias
import {useState} from "react" const Activation = () => { const [num, setNum] = useState(1) const handleCountUp = () => { if (num < 4) setNum++ } const handleCountDown = () => { if (num > 1) setNum-- } return ( <div className='modal-steps'> {num === 1 && <Step1 />} {num === 2 && <Step2 />} {num === 3 && <Step3 />} {num === 4 && <Step4 />} </div> <div className='modal-activation'> <button className='next-step' onClick={handleCountUp}> Next </button> <button className='return' onClick={handleCountDown}> Return </button> </div ) }Aquí tienes
import React, { useState } from "react"; export default function App() { const [currentState, setCurrentState] = useState(1); return ( <> {currentState === 1 && <StepOne />} {currentState === 2 && <StepTwo />} {currentState === 3 && <StepThree />} <button onClick={() => setCurrentState(currentState + 1)}>Next </button> <button onClick={() => setCurrentState(currentState - 1)}> Previous{" "} </button> </> ); } function StepOne() { return <h1>Step 1 </h1>; } function StepTwo() { return <h1>Step 2 </h1>; } function StepThree() { return <h1>Step 3 </h1>; }Mostrar condicionalmente estos pasos
import {useState} from "react"; const Activation = () => { const [activation,setActivation]=useState(1); const increment = () => { if(activation === 3){ setActivation((activation)=>activation=3) } else setActivation((activation)=>activation+1) } const decrement = () =>{ if(activation === 1){ setActivation((activation)=>activation=1) } else setActivation((activation)=>activation-1); } return ( <div className='modal-steps'> {activation ===1 && <Step1 />} {activation ===2 && <Step2 />} {activation===3 && <Step3 />} </div> <div className='modal-activation'> <button className='next-step' onClick={increment}> Next </button> <button className='return' onClick={decrement}> Return </button> </div> ) }