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 ¿Está activo el paso uno? Quiero representar el "paso uno" si el paso dos quiero representar "Este es el paso dos" y, de manera similar, para el tercer paso, el problema es solo saber cómo escribir si y si no como {condition ? "render if":"render else"} ¿Qué pasaría si tuviera que verificar más de una declaración?
Creo que la forma limpia (no de componer operadores ternarios) es crear un componente.
Ejemplo:
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> }eso será para algo más complejo que solo texto, para texto puedes simplemente:
const texts = { "1": "step one", "2": "This is the step two" } // in code return texts[step] || "some default"Puede hacer algo como esto. Cuando cambie el estado de su componente obteniendo renderizado, de modo que pueda escribir si la condición dentro del componente de reacción para verificar si su estado de paso activo cambia. Vea el código a continuación.
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 GharwapasiFormPuede escribir código más como 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> );