React conditional rendering with buttons-CodePudding

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..

CodePudding user response：

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
  )
}

CodePudding user response：

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>;
}

CodePudding user response：

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>
 )
}