How to show Step next and previous without using Switch Case statement

user_17851244 0
Viewed 129

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

}
next.js reactjs javascript
2 Answers

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'}
                  />
                }
              />
            );
}
user_139704340

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>
  );
}
user_112327710
Related