how to render if else and else if statement in react functional component

Question

const GharwapasiForm = () => {

  const [activeStep,setActiveStep] = useState(0);
  const steps = [
    'Click Your Photo',
    'Personal Details',
    'Submit Application',
  ];

  
  return (
    <FormContainer className='row'>
        <Stepper activeStep={0} className="py-2" >
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
            

          </Step>
        ))}
      </Stepper>
      

        
    </FormContainer>
  )
}

export default GharwapasiForm

Is active step one i want to render "step one"if step two i want to render "This is the step two" and similarly for the third step the problem is only know how to write if and else like {condition ? "render if":"render else"} what if i had to check more than one statement

{a===1 ? "one" : a===2 ? "two" : "three"}

Aman Sadhwani
– Aman Sadhwani

2022-07-12 05:32:36 +00:00
Commented Jul 12, 2022 at 5:32 — Aman Sadhwani
– Aman Sadhwani, Commented Jul 12, 2022 at 5:32

Buggies · Accepted Answer · 2022-07-12 05:40:52Z

3

I think the clean way (not to compose ternary operators) is to create a component.

Example:

const StepTitle = ({ step }} => {
  if (step === 1) {
    return <span>step one</span>
  }
  if (step === 2) {
    return <span>This is the step two</span>
  }
  return <span>something</span>
}

that will be for something more complex than just text, for text you can just:

const texts = { "1": "step one", "2": "This is the step two" }

// in code
return texts[step] || "some default"

answered Jul 12, 2022 at 5:40

Buggies

3831 silver badge7 bronze badges

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

Comments

Lakruwan Pathirage · Accepted Answer · 2022-07-12 05:44:39Z

You can do something like this.when state change your component getting rendering, so that you can write if condition inside the react component to check whether your activeStep state change.See the below code.

   const GharwapasiForm = () => {
    
      const [activeStep,setActiveStep] = useState(0);
      let activeStepString="";

      if(activeStep==0)
     {

        activeStepString="step one";
      }
   else if(activeStep==2){
     activeStepString="step two;

    }
  else if(activeStep==3){
    activeStepString="step three;

  }
else{
 activeStepString="step four;
}
      const steps = [
        'Click Your Photo',
        'Personal Details',
        'Submit Application',
      ];
    
      
      return (
        <FormContainer className='row'>
            <Stepper activeStep={0} className="py-2" >
            {steps.map((label) => (
              <Step key={label}>
                <StepLabel>{activeStepString}</StepLabel>
                
    
              </Step>
            ))}
          </Stepper>
          
    
            
        </FormContainer>
      )
    }
    
    export default GharwapasiForm

Leonardo · Accepted Answer · 2022-07-12 06:03:15Z

1

You can write code more like JSX.

const [activeStep, setActiveStep] = useState(0);

const titles = [
    <span className="one">one</span>,
    <h2 className="two">two</h2>,
    <div className="three">three</div>,
]

return (
    <div>
        {titles[activeStep]}
    </div>
);

answered Jul 12, 2022 at 6:03

Leonardo

1551 silver badge7 bronze badges

Collectives™ on Stack Overflow

how to render if else and else if statement in react functional component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related