I need to create the buttons that will change between each component, while one is showing, the rest has to be hidden, how can I do that with the click of the buttons?
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>
)
}
For example, step 1 will be the default value to be displayed, I will click on the next button, step 1 will be disabled, step 2 will show it and so on. And if you click the back button, the current step will change to hide and the previous one will be shown.
I've been trying to do this for a few days but I haven't really gotten anywhere..
Try my code below, please reply whether my code is working or not. Thanks
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
)
}
Here you go
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>;
}
Show conditionally these steps
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>
)
}