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

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

CodePudding user response：

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"

CodePudding user response：

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

CodePudding user response：

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