React conditional rendering with buttons

June 25, 2022

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

>Solution :

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