I have array list i.e
const data = [
{
title: 'Title1',
},
{
title: 'Title2',
},
{
title: 'Title3',
},
{
title: 'Title4',
},
];
that needs to be render inside Modal along with the Next and Previous button I can achieve using Switch Case , seems like this not a feasible solution.
any idea how to render title and when the user click on Next button it should change the content also. here is my switch case solution.
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;
}
}
How about this? Makes your code more dynamic.
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'}
/>
}
/>
);
}
You can try state management like this, with this your modal is a complete different component and you can handle what content to show in the modal through the parent component.
The useEffect is completely optionally, I just added to reset the modal to initial value.
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>
);
}