React conditional rendering with buttons

Question

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

If you are open to using a library, then just use a slider library. — Khalil
– Khalil, Commented Jun 25, 2022 at 3:05
with use state and condition displaying with a while by example i think you can acheive it — Code Scooper
– Code Scooper, Commented Jun 25, 2022 at 3:10
I know how i can do conditional render with 1 component but with all 4 i really dont know D: — Vrag
– Vrag, Commented Jun 25, 2022 at 3:27

Zainal Abidin · Accepted Answer · 2022-06-25 03:41:10Z

2

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

edited Jun 25, 2022 at 3:41

answered Jun 25, 2022 at 3:32

Zainal Abidin

693 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vrag Over a year ago

Thanks for taking the time to help me friend, I'm finishing my first freelancer, and thanks to your help I'm going to make it. :)

Mario Vernari Over a year ago

Are you sure you can inc/dec the state that way? I believe you have to use setNum(n => n+1) in place of setNum++. The same for decrement.

Zainal Abidin Over a year ago

Hey, is it working? I just type here, not try in code editor. Good luck for ur freelance!

Aman Sadhwani · Accepted Answer · 2022-06-25 03:30:28Z

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

I appreciate your time and help me understand how your code worked and helped me understand how your time worked. =)

Anuj Panwar · Accepted Answer · 2022-06-25 03:39:31Z

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

I also appreciate your help, I managed to get a result through your answers. :D
He directly mutates state setNum++ or setNum-- that is not good practice at all, you can check out the documentation

Collectives™ on Stack Overflow

React conditional rendering with buttons

3 Answers 3

3 Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Related