Digamos que tengo una vista similar a la de un asistente con un número arbitrario de pasos:
const StepsComponent = () => { const [stage, setStage] = useState(1); const stageProps = {stage, setStage}; const stageMachine = () => { switch (stage) { case 1: return <One {...stageProps} />; case 2: return <Two {...stageProps} />; case 3: return <Three {...stageProps} />; default: return <One {...stageProps} />; } }; return ( <> {stageMachine()} </> ); } ¿Existen formas más elegantes de manejar estos casos, además de las declaraciones de cambio o las expresiones ternarias?
Si tuviera asistentes con más de 10 pasos, sería un verdadero desastre administrarlo.
Probablemente podría hacer algo como esto, pero parece extraño, ¿no?
const stageMachine = Object.freeze({ 1: <One {...stageProps} />, 2: <Two {...stageProps} />, 3: <Three {...stageProps} /> }); Además, no me gusta la idea de invocar la función stageMachine a cambio, ¿se considera una mala práctica?
Puedes probar esto
const StepsComponent = () => { const [stage, setStage] = useState(1); return ( <> {stage === 1 && <One />} {stage === 2 && <Thow />} {stage === 3 && <Three />} </> ); }