Tengo una lista de matrices, es decir
const data = [ { title: 'Title1', }, { title: 'Title2', }, { title: 'Title3', }, { title: 'Title4', }, ];que debe representarse dentro de Modal junto con el botón Siguiente y Anterior que puedo lograr usando Switch Case , parece que esta no es una solución factible.
alguna idea de cómo representar el título y cuando el usuario haga clic en el botón Siguiente , también debería cambiar el contenido. aquí está mi solución de caso de cambio.
const [showStep, setShowStep] = useState(1); const renderModal = () => { switch (showStep) { case 1: return ( <Modal open={show} onClose={() => setShow(false)} onSubmit={() => setShowStep(2)} title={'User Type'} number={1} total={3} /> ); case 2: return ( <Modal open={show} onClose={() => setShow(false)} onSubmit={() => setShowStep(3)} title={'UserClass'} number={2} total={3} previous={ <ButtonComponent onClick={() => setShowStep(1)} name={'Previous'} color={'primary'} variant={'outlined'} /> } /> ); case 3: return ( <Modal open={show} onClose={() => setShow(false)} onSubmit={() => setShowStep(4)} title={'Class'} number={3} total={3} previous={ <ButtonComponent onClick={() => setShowStep(2)} name={'Previous'} color={'primary'} variant={'outlined'} /> } /> ); default: return null; } }¿Qué tal esto? Hace que su código sea más dinámico.
const renderModal = () => { return ( <Modal open={show} onClose={() => setShow(false)} onSubmit={() => setShowStep(showStep + 1)} title=data[showStep].title number={showStep} total=data.lenght previous={ <ButtonComponent onClick={() => setShowStep(showStep - 1)} name={'Previous'} color={'primary'} variant={'outlined'} /> } /> ); }Puede probar la administración de estado de esta manera, con esto su modal es un componente completamente diferente y puede manejar qué contenido mostrar en el modal a través del componente principal.
El useEffect es completamente opcional, acabo de agregar para restablecer el modal al valor inicial.
const data = [ { title: 'Title1', }, { title: 'Title2', }, { title: 'Title3', }, { title: 'Title4', }, ]; const ModalWithButtons = ({ detail, onClickNextButton, onClickBackButton, showModal, setShowModal }) => { return ( <Modal open={showModal} onClose={() => setShowModal(false)} onSubmit={onClickNextButton} title={detail.title} previous={ <ButtonComponent onClick={onClickBackButton} name={'Previous'} color={'primary'} variant={'outlined'} /> } /> ); }; export default function ParentComponent(props) { const [showModal, setShowModal] = React.useState(false); const [showDetailNo, setShowDetailNo] = React.useState(0); useEffect(() => { // resetting the modal number to 0 if(!showModal) setShowDetailNo(0); }, [showModal]); const handleButtonClick = () => { setShowModal(prevShowModal => (!prevShowModal)); } const handleOnClickBackButton = () => { /* we can disable the previous button in the modal when showDetailNo is 0 */ if(showDetailNo === 0) return; setShowDetailNo(prevShowDetailNo => (prevShowDetailNo - 1)); } const handleOnClickNextButton = () => { /* we can disable the next button in the modal when showDetailNo is data.length-1 */ if(showDetailNo === data.length-1) return; setShowDetailNo(prevShowDetailNo => (prevShowDetailNo + 1)); } return ( <div className="App"> <button onClick={handleButtonClick}>Show Modal</button> {showModal && <ModalWithButtons showModal={showModal} setShowModal={setShowModal} detail={data[showDetailNo]} onClickBackButton={handleOnClickBackButton} onClickNextButton={handleOnClickNextButton} />} </div> ); }