CODEWITHSUNDEEP
javascriptreactjs
sarangkkl
sarangkkl

Reputation: 802

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

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

Upvotes: 1

Views: 467

Answers (3)

Leonardo
Leonardo

Reputation: 155

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

Upvotes: 1

Lakruwan Pathirage
Lakruwan Pathirage

Reputation: 657

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

Upvotes: 1

Buggies
Buggies

Reputation: 383

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"

Upvotes: 3

Related Questions